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.
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.
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!
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.
Some layouts are impossible with Grid but a perfect fit for Flexbox and vice versa.