No Time Dad

A blog about web development written by a busy dad

Thoughts on Responsive Auto-Fit Grid

The benefit of using css grid with auto-fit is that I can create a responsive layout without using media queries. The browser will do the work of figuring out how many columns and rows to display given the size of the screen. I think one of the more common use cases for this is creating “tiled” layouts (think Pinterest) with cards.

The problem is that the browser cannot read my mind. It’ll sometimes put elements in places where I don’t want them to go, or leave empty spaces where I don’t want them.

This leads me to believe that part of the deal with using css grid with auto-fit is that I have to be willing to sacrifice some amount of control over the layout. I have to be willing to accept that every single screen size I’m targeting might not be exactly how I want it. Which is sometimes ok, given the amount of css I won’t have to write when creating a responsive grid using auto-fit.

Below is an example of how little css can written to create a basic responsive grid without media queries. This code will create a two by six grid on large screens and a one by six grid on small screens. No media queries in sight. And honestly, the wrapper selector can be left out as needed. It’s really just there because I like white space.

.wrapper {
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 375px), 1fr));
}
<div class="wrapper">
  <div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

I’ve painted myself into a corner multiple times using auto-fit. One example is when I was building a grid that should have a single column until the screen size reaches 768 pixels wide (tablet size). It should then switch to a two column grid and stay at two columns from that width and above.

The problem is that I also like to have some white space on either side of my elements, which proved to be a tricky problem for the 768px screen size. It is, however, a problem that can be easily solved with media queries. But the point of this example was to not use them. So, I ended up just not having any white space on the 768px width screen. Which is a small concession for this example project, but maybe not for others.

So, I think it comes down to a question how much time do I want to spend trying to get css grid with auto-fit to work for my specific use case versus writing media queries. For me, it’s usually more efficient to do the latter, but sometimes a quick auto-fit layout saves a huge amount of time.

The other thing to consider is that the grid-template-columns value from the “simple” example above isn’t exactly simple, in my opinion.

grid-template-columns: repeat(auto-fit, minmax(min(100%, 375px), 1fr));

If I didn’t write it I’d definitely need to spend some time trying to understand what it does. Actually, it still takes me a moment to remember what it does. It makes me wonder if in the long run just using media queries results in more time saved. Cleverness usually comes with the cost of time later on.