Skip to content

24 ways to impress your friends

Design Systems and CSS Grid

2 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Simon Owen

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

basher

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.

Impress us

Be friendly / use Textile