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 was born from multiple previous layout‑oriented modules and rulesets, including the Advanced Layout Module in 2007. Microsoft was involved with getting this declaration put through as a draft, and it was accepted by the CSS Consortium as a Candidate Recommendation in 2016 ‑ featuring Tab Atkins Jr. (coincidentally also the author of the newest Flexbox syntax) as the main 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.

I mentioned the horizontal header above, and that's a perfect case for Flexbox ‑ you need everything aligned centrally, and you need the navigation and logo to be situated at opposite ends of the navigation bar. Flexbox is ideal here because it's a one‑dimensional layout (being a row), and the header needs alignment logic that Grid just isn't as good at.

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;
• Flex is better for alignment;
• If you need an item to spread over a column or row, use Grid.

Another thing to bear in mind is that you can mix and match here. Grid parents can be flex items, and vice‑versa, allowing you to get the benefits of the alignment rules in Flex and the layout rules in Grid at the same time.