Should I use CSS Grid? Or Flexbox? Or Float and Clear? A Handy Flowchart for Picking the Right CSS Layout Module

So you have a layout you need to somehow create using CSS and you ask yourself "Self, what is the right tool for this job? Should I use CSS grid? Or maybe a flexbox? Or float and clear? How do I make the right decision?"

I have a flowchart for you to make it simple. It's from my An Event Apart talk titled "Modern Tools, Modern Layout, Modern Web" (which you can see in full by buying access and supporting one of the most important web conferences in the world as it tries to survive a global pandemic). Full explanation below the image:

How to use this flowchart

Feel free to download and use this flowchart in whatever way is practical to you. Print it and put it on the wall next to your workstation. Make it your desktop background image. Challenge the stereotype about what types of graphics should be turned into tattoos. It's entirely up to you. Here's how to use the flowchart, starting at the top:

Stage 1:

Does your layout place items across two dimensions, both horizontal and vertical? Are you imposing a specific layout onto the items and making decisions about their exact placement?

If yes, use grid.

If no, move on to stage 2.

Stage 2:

Does your layout place items across one dimension, either horizontal or vertical, with or without wrapping? Are you laying out some form of multi-item content that could be presented as a list? Do you want to allow each item to control its own relative size and position?

If yes, use flex. Except in some cases (centering content along both axis for example) grid may be a better choice. Try flex first and see if that fits your fancy, otherwise try grid.

If no, move on to stage 3.

Stage 3:

Does your layout follow a traditional document content flow, typically single-column vertical stack, with aligned images or blockquotes wrapped with surrounding text?

If yes, you're in the default flow layout module, and those images and blockquotes can be placed using good old float and clear.

If no, you're either looking at a table or multicol, or more likely you've answered one of the above questions wrong, so go to Stage 1 and try again.

Stage 4:

Before you commit to any of the above answers, one more question:

Does your layout involve any type of stacking along the z-axis, meaning elements are placed on top of one another in some form of layered fashion?

If yes, use grid, because with grid you can place as many elements as you like in the same cell or cells and use the z-index and position properties to achieve the exact result you need.

If no, see Stage 1-3.

Grid, Flex, and Flow are all part of your CSS layout toolkit

When I did a talk in 2014 about how you could do all these amazing things with flex, several of the conference attendees stopped me afterwards and asked if we needed float and clear now that we had flex. My answer was of course we do! Because float and clear have specific uses - like floating images left or right in context - which flex is not built to do. Flex comes in addition to rather than as a replacement for float, eliminating the need to use float for something it was never meant to be used for, like making flexible one-dimensional layouts.

Then, when I did a talk in 2017 about how you can do all these amazing things with CSS grid, several of the conference attendees stopped me afterwards and asked if we needed flex now that we had grid. My answer, once again, was of course we do. Because flex still has specific uses. Grid comes in addition to rather than as a replacement for flex, eliminating the need to use flex for something it was never meant to be used for, like making two-dimensional grid layouts.

Grid, flex, and flow (float and clear) are all part of your CSS layout toolkit, and they work best when used together. The key is to know what each layout module does and when to use it. Which is why I made this flowchart, and why I want you to use it.

So, put your flex boxes inside your grids, and don't be afraid to float things inside your flex boxes either, if and when that makes sense.

When all we had was a hammer, we used that hammer for everything. Now we have an electric drill and a compound mitre saw as well. Learn to use your tools to the best of your ability, and your tools will help you build a better web!

--

Morten Rand-Hendriksen is a Senior Staff Instructor at?LinkedIn Learning?(formerly Lynda.com) focusing on?front-end web development and the next generation of the web platform. He is passionate about diversity, inclusion, and belonging and works every day to build bridges between people to foster solidarity. Design is political. Code is political. Hope is a catalyst.