Flexbox vs. grid

During the wave of tile‑based UIs that came our way in the mid‑2010's (looking at you, Windows 10), tastes began to change in web design from the trendy, bright flat design that was prevalent beforehand.

Designers began to work on more tricky and intricate layouts, with clients no longer content to have the usual two‑column image and text layouts, or the ever‑present three‑column card layouts. Website owners wanted their content presented in a way that required more intelligent layout rules. Alongside this evolution in design, developers needed something that would help them to build these new UIs.

Float declarations are fiddly and not really suited to complex grid layouts, as well as requiring clearfloats and needing to incorporate responsive or adaptive design as the website breaks down onto smaller screens. Tables make it feel like you're developing an email template ‑ or working for Netscape ‑ and trying to make use of hacks with inline-block can be a very frustrating experience.

Enter CSS3's Grid and Flexbox.

Flexbox

Flexbox is fantastic at handling fluid one‑dimensional (i.e., column‑and‑row) layouts and enjoys wide browser support without prefixing. It's at its best when being used in layouts that only need restricting in one direction, allowing for variable heights across a single row, or handling horizontal headers in a matter of a few rules.

The real strength of Flex comes from its powerful and intelligent alignment rules. Always handy (especially when there's still a multitude of hacks in play to vertically centre‑align content in CSS), the alignment rules of Flex are an absolute dream. Allowing for centre alignment along either axis, they also allow for bottom, top, left, right, or spread alignment, taking into account multiple elements and handling a big chunk of alignment logic for you.

It also benefits from some great responsive rules, allowing for developers to flip the direction from row to column to break down to a vertical approach on thinner viewports or disable flex entirely with just one rule.

grid

Grid grew out of earlier layout proposals, with contributions from Microsoft and others. The W3C CSS Working Group's September 2016 Candidate Recommendation names Tab Atkins Jr., Elika J. Etemad (fantasai) and Rossen Atanassov as editors, with Alex Mogilevsky and Phil Cupp listed as former editors. It was a collaborative specification, rather than the work of a single author.

Grid has great browser support ‑ although it's not quite as widely supported as Flexbox. It's also great at dealing with layouts in two dimensions ‑ both column and row ‑ simultaneously.

So, Where Do I Use Which One?

There's a good deal of confusion around this question ‑ even now, four years after Grid became widely supported. Part of this issue might well be down to developer laziness or overload; Flexbox came with its own rules and syntax, and Grid came with a whole other set too ‑ when you're already busy with work, it might seem like too much effort to learn both.

However, part of it is definitely down to the fact that you can achieve the same layouts with both of these modules ‑ it's largely down to which one is more intuitive in each individual case.

A horizontal header is a good fit for Flexbox when the logo and navigation need to share a row and distribute the available space. Grid also has alignment controls; I choose Flexbox here because the layout is driven by the content along one axis, rather than by coordinated rows and columns.

However, if you find yourself building a layout with an item that needs to span more than one column or a row ‑ Grid is what you want. With syntax built around controlling widths and heights for items within grids, the Grid module is purpose‑built for more complex or interesting grid layouts ‑ as the name suggests.

Ultimately, your best bet is to remember that:

• Grid is easier to write for two‑dimensional layouts;
• Both systems support box alignment. Flexbox is often convenient for distributing content along one main axis;
• If you need an item to spread over a column or row, use Grid.

You can mix them, too: a grid item can be a flex container, and a flex item can contain a grid. Use Grid where tracks need to line up, and Flexbox where the content needs a flexible row or column.