[wa1987]

Grid is not a superset of Flexbox. The former always controls the layout in two dimensions (rows & columns). The latter controls one axis and calculates the layout of elements per flex line.

Some layouts are impossible with Grid but a perfect fit for Flexbox and vice versa.

[shepmaster]

> Some layouts are impossible

Do you have any links to demonstrate this? I’m starting to use grid more and more, so I’d like to have a little advance knowledge of when I shouldn’t apply it.

[wa1987]

For sure! Whipped up a quick pen:

https://codepen.io/willem-aart/pen/oNxwRXY?editors=1100

This is impossible to achieve with CSS Grid.

One might alternatively approach this 'cluster layout' using inline-block elements. However, these elements would then be separated by space characters and the width of the space would be added to any applied margins. These issues could possibly be resolved by resorting to hacks such as setting font-size: 0 on the parent. Not pretty.

On the other hand, when using flexbox, space characters between flex childs are ignored which makes it a good fit for this kind of layout.

[Theodores]

It is a quick pen. On the surface brilliant. But I can't imagine a use case in my projects and the faux Latin isn't helping me. Plus the negative margin is Jacky to me although standard fayre in pre Grid days.

I would prefer a more boring but simpler to code world of CSS. However I am going to look into flexbox more. Thanks for your pen!

[jsmith45]

That layout is reasonable common in at least one scenario: A list of tags with wrapping. If something supports a large number of tags and the textual content of tags can vary significantly in length, then thewy will usually be sized to fit.

On the other hand, that layout hardly needs flexbox, since inline block elements will wrap in much the same way. The vertical equivalent of that layout however would very much require flexbox. However, I'm not sure of the use cases for that.