Great article Stuart! I’m looking forward to getting more into grid in 2018 and I’m sure I’ll be coming back to this article time and time again :)

Great article Stuart… resonates with me because of applying new CSS Grid layout to a large pre-existing grid system.

I’ve POC’d a similar approach – https://codepen.io/basherkev/pen/PjKQKM – where overall page / template layout is handled by CSS Grid with fullbleed component support. Uses leaner semantic HTML markup, and falls back to Flexbox, and then to simple 2-column float.

My current thinking is that our internal layout (using our existing “grid-” classes with 3 layers of DIVs) will use Flexbox instead of Grid, and will fall back to inline-block. No need to change HTML markup.

But our masonry grid component (which currently uses “funky” floats) will be update to use Grid – see https://codepen.io/basherkev/pen/QqggwG – and again, no need to change markup.

And all of this will be mobile-first, so we can streamline CSS further.

Wonderful article! Helps me a lot to drive home the idea of using CSS Grid more often in our layouts. =)