The one thing I hate about grid

After seeing how excited Jen Simmons and Rachel Andrew were about the CSS grid module I tried it out. Since then I’ve been obsessed with it. I’ve made something with grid every day. I’ve read the spec. I read every article anyone publishes about it. There is one thing I hate.

My only computer is a desktop mac with a gigantic screen. When designing a site for larger viewport widths there are two things that I avoid at all costs:

1. Having content (icons, text, photos) at the far left and right extremes of the viewport.
2. Having a max-width set on the entire container div so that at larger screensizes the site is a box in a larger browser window. Codepen example

The design standard, and the one that is undoubtedly better, is to have bands of color that span the whole screen width (a black header and footer, for example), while the actual content is constrained in the middle at anywhere between 900px to 1100px.

Both of these things are easily avoided with traditional CSS. You make a div, set it to full screen, and give it a background color. Then you nest a div in that div and give it a max-width. It’s easy. You do this every time you want a different color to span the screen.

CSS grid makes layout a lot easier. It’s could be one of the most important developments that web design has ever seen. How would you achieve a similar effects with CSS grid?

You might have heard of minmax. It lets you set a minimum and maximum value for a column or row in your grid. This is perfect for what we want to achieve. We can use an fr unit at either side to take up and space, make our columns responsive by using viewport units or percentages, and but also give the columns a maximum width in pixels:

grid-template-columns: 1fr repeat(4, minmax(20%, 225px)) 1fr;

Perfect.

Except that this doesn’t work!

Here’s what the spec says:

[minmax] defines a size range greater than or equal to min and less than or equal to max. If max < min, then max is ignored and minmax(min,max) is treated as min. As a maximum, a <flex> value sets the track’s flex factor; it is invalid as a minimum.

So in our above code our columns will actually be the equivalent of

grid-template-columns: 1fr repeat(4, 20%) 1fr;

Twenty percent at every viewport, making our columns ludicrously wide on larger screens.

This image looked nice at 80% on smaller screen sizes. 80% of a large screen looks terrible.

The closest solution I’ve come to has involved putting max width on the grid items themself, rather than the columns they go into:

.griditem {

max-width: 800px;
width: 100%;
justify-self: center;

}

Its far more complicated when dealing with different content spanning multiple columns. You can see the code here.

I was churning out beautiful Codepen’s every day with grid. Now I have almost fallen out of love.