DEV Community

loading...
Cover image for simple responsive grid layout w/ css-grid

simple responsive grid layout w/ css-grid

mr_eis profile image Marius Eisenbraun ・3 min read

Why a grid?

There are many reasons out there to display content as a well structured grid. Someone needs a small image gallery, the other one needs to display products or maybe a simple portfolio. And over all there is this trend to put content in 'cards' to structure the UI.

Especially when you are in a component-based environment, it is very handy and powerful, to put the layout in the container-element so the child-components will just use it without any worries.

Wouldn't it be nice, to have an easy solution with CSS, to start with?

Here is one, using the implicit grid:

The HTML

We wanna keep it simple, with a container and some cards/items/elements inside of it.

<body>
  <main>
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
    <div class="card">4</div>
    <div class="card">5</div>
    <div class="card">6</div>
    <div class="card">7</div>
    <div class="card">8</div>
    <div class="card">9</div>
    <div class="card">10</div>
    <div class="card">11</div>
  </main>
</body>

The <main> is our container. Every direct child should be displayed in a nice grid.

'nice' in this context means:

  • elements get the same width
  • the same hight
  • on every screen size

So yes, of course it has to be responsive!

The CSS

So let's define our container via display: grid and add some 'CSS-magic':

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
}

These three lines are all you need to define a simple and responsive grid.

So, what happens:

1. we define <main> to be displayed as grid.

Easy.

2. we define columns

  • repeat generates a column or a pattern of columns in a given amount.
    • The amount of columns is the first value. The size or pattern is the second value.
  • auto-fit is used, coz we don't know a fix number of columns. We just want as much columns as are fitting on the screen. So we let the browser generate this number for us.
  • minmax(300px, 1fr) defines the size of each column. The size is fluid between the first and second value. So we set 300px as minimal size for each grid-item and with 1fr we make sure, the items always keep the same size.

More about this pattern: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

3. we define rows

This minmax() function is used to set a minimal height for each grid-item, but also to define that all items will have the same height.

You could remove this line, if you don't want this even-height behavior and the rest of the responsive grid will work as expected.

Beautify

Of course a grid-ui has some gaps between it's children, so let's add this:

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  grid-gap: 2rem;
}

Also, sometimes a grid-item can be more important than others, so you change it's size (e.g. grid-column: span 2;). In this cases you can generate empty spots in your well structured grid. To avoid this we add another line:

main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  grid-gap: 2rem;
  grid-auto-flow: dense;
}

Demo

(open it in new window to better see the responsive behavior)

Discussion (0)

pic
Editor guide