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.
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.