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.

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 :)

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