Using Flexbox Instead of Float-Based Grids

Picture of a grid

I have been thinking a lot recently about different layout methods in CSS. I was fortunate enough to start doing web development in a time when there are tons of options for layout.

Despite both CSS Grid and Flexbox having excellent support across all major modern browsers, most tutorials and courses on layout still teach float based responsive grids.

Set up properly, these kinds of grids are easy to work with. Floats are supported in practically all browsers, making float-based grids useful when backwards compatibility is essential to your project.

However, using float to make a grid is not intuitive. These grids require clearing context, pseudo content, and your code can get unwieldy if you need grids for several screen widths.

I had some prior experience with CSS Grid, but had never used Flexbox before. I found this excellent tutorial from Chris Coyier at CSS-Tricks on using Flexbox to make responsive grids. Using Flexbox in my current project, I cut the amount of CSS devoted to layout down by over 50%. Layout with Flexbox is so easy, and the CSS is so clean, that I am kicking myself for not learning Flexbox sooner.

Get in Touch

Interested in working together? Click the big button below.

Send me an Email