[yuchi]

This approach is over-engineered to say the least…

You can implement such a layout without using Grid Layout and using just Flex Layout. Also with some min-/max-width tricks you can also completely avoid having media queries in there…

For beginners in HTML/CSS this approach is absolutely distracting IMHO.

[ben-morris]

Hey, op / author here. For this design, of course you could use Flex, but the purpose of the article is that a design created with a drag and drop editor by a user, could be rendered responsively. Users could overlap elements and create all kinds of complex creations that we can't slice up in to flex blocks programmatically. The grid provides a way to render just about anything, with a bit of flexibility.

100% not advocating an engineer to ever do this, we only do it because it's automated and there is no engineer present to convert a design in to a website at scale.

[inopinatus]

This is evidently intended for platform builders, not standalone site authors. As someone whose systems include content authored by nontechnical third parties, and favouring pure CSS solutions to layout concerns, I found it a useful discussion.

[nicoburns]

> You can implement such a layout without using Grid Layout and using just Flex Layout

IMO Grid is actually simpler than Flex. Once IE11 is out of the picture, I think it might be worth considering teaching CSS beginners using a Grid-first approach.

[whizzter]

Agreed, as soon as you need more than auto-growing AND alignment in 2 dimensions Flexbox becomes a world of pain whilst a grid JustWorks(TM).

[akvadrako]

I agree. You should only use Flex box when you need it, like when you have differing width children and wrapping.