Don’t Overthink It (Flexbox) Grids

Four years ago I posted “Don’t Overthink it Grids” and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week.

That article was my way of saying: “Fear not! You can make a grid yourself! You don’t need a complicated framework.” It might not have been quite as fancy, but that’s how I rolled. You float a couple of elements with some percentage widths and call it a day.

These days, if you are ready to jump to flexbox for layout, DIY grids are even easier.

This is how I normally do it:

<div class="flex-grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

.flex-grid {
  display: flex;
}
.col {
  flex: 1;
}

That supports any number of columns and they are automatically equal width and flexible!

Wanna have them break into a column for small screens? Easy:

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

Need gutters? You could add margins to the columns. You could add padding to the columns. I like the idea of using justification to create the columns, like:

.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 32%;
}

If you go the flexbox route, you also now have the ability to change the order of columns as needed, which can be great for keeping more important content higher in the source as well as responsive design reshuffling.

See the Pen Easy Flexbox Grid by Chris Coyier (@chriscoyier) on CodePen.

My point, again: it’s not required that you reach for a grid framework to build a grid. You can do it! This is also not to say that flexbox is trivially easy and you’ll never have any problems. There are plenty of edge cases and weird browser support things that you may run into if you start using more niche flexbox features. The stuff we looked at here is pretty vanilla though and I’d be surprised if you had problems.

More

Philip Walton has written more on the glory of flexbox grid systems.

To be fair, grid frameworks tend to be fairly robust, and plenty of teams find success in having predefined classes and recipes for building any type of grid they need. If you’re interested in leaning on a grid framework that is flexbox specific, here’s a few I know about: Frow, Flexbox Grid, and Gridlex.