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 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

Classic DEV Post from May 3

What do you code to relax?

My projects have me jumping through hoops of a wide variety of technology, talkin...

Bertil Muth profile image
Agile coach and developer

Sore eyes? now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️