CSS Grid and Flex - Remove the CSS hacks!

3/31/2020

If you haven't dipped your toes into web development for a few years you might not be familiar with new built-in tools that browsers now support for building layouts with CSS. It is now much easier to achieve complex and simple layouts without the hacks of previous generations.

Two new tools in the web dev toolbox are Grid and Flexbox (also known as just Flex).

They both help achieve similar results in different ways. Traditionally, setting up grid layouts with columns and rows has been a painful process in CSS. The need to create layouts that would both fit into grids of rows and columns and also be responsive to the user screen size generated hell on earth for frontend coders around the world. Simple things like spacing cells according to content, creating equal height cells and aligning content at the bottom or top of cells was achieved through all sorts of esoteric hacks.

In fact, this is one of the many driving forces for the rise of popular CSS frameworks we have today, which became popular by abstracting this scaffolding of layouts into simple CSS classes (Bootstrap and Tailwind come to mind).

But let's get to it - what is Grid and Flex and how do they compare? They are similar but have a few important differences:

Grid is Container-Based, Flexbox is Content-Based, meaning Grid is more rigid to the grid and Flex allows the content to determine the structure.
Flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time.
When you only need to control the layout by row or column – use Flexbox
When you need to control the layout by row and column – use Grid
Flexbox works from the content out. An ideal use case for Flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.
Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid.

Theory is great, but in practice what does this mean? Below is an example layout that we would like to achieve and 3 different approaches to achieve it.

Here is what we want in the browser - 4 elements filling the width of the parent container:

This is the HTML:

<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

With previous CSS techniques you were quite limited in achieving this result as you would need to know in advance the width of the elements displayed side-by-side inside each div. Here is a solution using floats:

.row {
    margin: 20px auto;
    max-width: 300px;
  }
  .row > div {
    border: 1px dashed gray;
    text-align: center;
    float: left;
    padding: 12px;
    width: 40px;
  }

With Flex you have a much more flexible solution where you can rely on the content inside the div to determine and adjust the div widths. Notice the number of columns is determined in the HTML by the amount of child divs and not in the CSS:

 .row {
    margin: 20px auto;
    max-width: 300px;
    display: flex;
  }
  .row > div {
    border: 1px dashed gray;
    flex: 1 1 auto; /* Size of items defined inside items */
    text-align: center;
    padding: 12px;
  }

And with Grid, a slightly different approach - you determine the number of columns in the CSS and also their widths. The advantage here is you can set the individual column sizes:

.row {
    margin: 20px auto;
    max-width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Size of items defined inside container */
}
.row div {
    border: 1px dashed gray;
    text-align: center;
    padding: 12px;
}

And so much more...

This was just a small sample of what Grid and Flex can do, they are now both pretty mature tools that can be used in most modern browsers and cover most use cases. At the bottom of this page there are some more further reading links if you would like to know more.

Browser Support

Both Flex and Grid have been available for a number of browser generations so are viable options for projects that don't need to support old browsers. Flex has a slight edge (Global 96.75%) but Grid (Global 93.52%) is not far behind.

Of course there is a lot more to Grid and Flex than just aligning elements side-by-side. It is now possible to scaffold your entire project using them, foregoing a lot of hacks from the past! Both are complex in their own right and have many features that should satisfy most modern layout needs.

CSS Grid and Flex - Remove the CSS hacks!

3/31/2020

And so much more...

Browser Support

Further Reading: