Nick ♨️Feb 14
ppk 🇪🇺

Grid: for creating containers for fluid content to fill

Flexbox: for stacking rigid blocks of content in the most efficient way possible

Does this even make sense?

Intuitively, grid is rigid and flexbox is fluid. But it's the other way around for their contents?

???

#vagueCSS

Feb 13 at 11:33pmWeb
Show threadCSS by T. Afif Feb 13
@ppk Grid is for a layout "you" control. Flexbox is for a layout "the content" controls.
Show threadppk 🇪🇺Feb 13

@css Yes, but that's not how people use it.

"Hey, I give all my flex boxes a hard width, and the container as well, and now they behave like a grid."

We need to find a better way of explaining the difference.

Show threadCSS by T. Afif Feb 14

@ppk by trying to explain the difference we end up making them "enemies" and the conclusion is often the same

Person who don't understand grid: "I prefer flexbox, it's more intuitive and I can do everything with it"

Person who don't understand flexbox: "CSS grid is way better, it can achieve all the layouts without the complex shrink/grow/wrap stuff"

Show threadOllie BoermansFeb 14

@ppk @css I agree we are missing terminology to describe responsive layout.

A layout using flex or grid does not reliably categorise it. There are too many ways to use them.

The behaviour of resulting layout patterns is more practical. Each relies on a number of properties to function.

The best example I’ve seen of an attempt to put names to layout https://every-layout.dev/ from @heydon and @belldotbz

Relearn CSS layout

Show threadLarge Heydon ColliderFeb 14

@ollicle @ppk @css @belldotbz

Grid: for print designers
Flex: for web designers

(I'm half serious)

Show threadEric EggertFeb 14

@heydon @ollicle @ppk @css @belldotbz “Grid defines where content goes, flex defines how content flows.”

It rhymes and has alliteration!

Show threadOllie BoermansFeb 14

@heydon @ppk @css @belldotbz

Truth. Grid is less Flex-ible.

Show threadShawn EisenachFeb 14
@ppk I tend to think of grid for two dimensional layout, flex for one dimensional layout?
Show threadNick ♨️Feb 14
@ppk the history explains it. Flexbox came before grid and was a more flexible box model than the existing box model. Grid came after and is based on common design nomenclature provided by Bootstrap and others. Unfortunate timing.