Responsive layouts with CSS grid

The CSS grid spec allows us to create responsive layouts without media queries by specifying the minimum width of a grid item. When the minimum width is reached one column will automagically be removed. This can be used to show a three column layout on desktop, a two column layout on tablets and a single column on mobile screens. The syntax requires us to understand the concepts of the repeat function, the fraction unit fr, and the minmax function. Here’s what it looks like when everything is working together correctly (resize the window to see how the the layout shifts when the boxes become narrower than 100px):

The repeat function

So how does this magic work? Let’s deepen our understanding by taking a closer look at the repeat function. It can be used to specify the number of columns in a grid and their width. The following interactive example introduces the repeat function with a fixed number of columns and a fixed column width:

/* edit the number above and resize the window */
display: grid;
grid-gap: 16px;
gridTemplateColumns: repeat(3, 200px);

The fr unit

If we want to divide the available space evenly among the columns we can use the fraction unit fr instead of a fixed pixel value.

/* edit the number above and resize the window */
display: grid;
grid-gap: 16px;
gridTemplateColumns: repeat(3, 1fr);

The minmax function

The minmax function defines a range of preferred values between a minimum and a maximum value. When the maximum value is 1fr the available space will be distributed evenly between the columns and we can use the minimum value to define the point at which the layout should change.

/* edit the number above and resize the window */
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Auto-fill and auto-fit

To make the column grid responsive we need a more ambigious way to specify the number of columns. There are two options auto-fill and auto-fit. They only differ when there are not enough grid items to fill all the columns of the first row.

/* Change the values above */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

Responsive gap

More often that not it makes sense to make the gaps between the grid items responsive, too. To achieve this we can use the technique I described in my blog post about fluid typography. By defining the size of the gap in the vw (viewport width) unit the gap will grow with the screen size and by using the min function we can define a maximum value, so that the gap stops getting bigger once the maximum width of the layout is reached. All we need to know for this approach is the gap size at the maximum width of the layout.

/* edit the numbers above and resize the window */
gridGap: min(2.08vw, 16px)

All together now

/* edit the number above and resize the window */
display: grid;
grid-gap: min(2.08vw, 16px);
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));