DEV Community

Flexbox vs. CSS grid

Bertil Muth on June 12, 2019

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

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

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.

Collapse
 
anpos231 profile image
anpos231

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

Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

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.

Thread Thread
 
anpos231 profile image
anpos231 • Edited

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/

Thread Thread
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝

Useful website - thank you for sharing!

Thread Thread
 
kenbellows profile image
Ken Bellows

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

Thread Thread
 
bertilmuth profile image
Bertil Muth • Edited

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

Thread Thread
 
kenbellows profile image
Ken Bellows

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!

Collapse
 
brob profile image
Bryan Robinson

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