Flexbox vs. CSS grid

Bertil Muth on June 12, 2019

What’s your favorite? For what? Strong opinions welcome :-)

markdown guide

Flexbox :) Why? The ability to reorder stuff on different screen sizes with order:x is SUPER awesome. I find CSS Grid to be very tabular by comparison.


With grid you can also reorder stuff.
It was the whole point of grid on the first place.


I wasn't aware of this! I haven't used grid a huge amount. Honestly flexbox does what I need it to, so haven't felt the need to pick up grid yet.

I often use flexbox myself.
There are certain cases where it's easier to layout things with flex rather than grid.

I often use this tool to generate working grids then I can just copy and paste: grid.layoutit.com/

Grid takes reordering to a whole new level. Skim this article I wrote a while ago about one of my favorite features of Grid:

Excellent article. Thanks for sharing. The ASCII art specification is a great idea.

Oh man, for high-level layouts, like at the whole page level, it's an absolute game changer. I can't wait for Subgrid to complete the Grid picture!


I use Grid more than Flex at this point, but they both server very important roles.

When I want to work "Layout in" i.e. Define how my layout should work and flow my content into it, I use Grid. In my current life, I do this methodology a lot.

When my content needs to control the size of my elements, i.e. in a navigation or something similar, I use Flex and it works really well.

I also really enjoy using flex inside a grid item to control awkward whitespace issues (the hardest part of web design, figuring out what to do with awkward whitespace!).

I think the important thing when choosing a layout mechanism is this: If you have to drastically modify your markup to make the layout mechanism work, you may be using the wrong tool for the job.

I wrote an article on this a little while ago

code of conduct - report abuse