simple responsive grid layout w/ css-grid
Tags: css, layout, webdev
Published: 2020-01-05 19:47:39

## 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.

```html
<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'*:

```css
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:

```css
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:

```css
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)

{% codepen https://codepen.io/mreis/pen/abzEdgm default-tab=css,result %}