in Internet, Web Development

CSS Grid Layout

2017 called…

Despite articles from 2017 saying that it was prime-time for CSS Grid, it’s still not common practice on production sites. CSS3 features like Flexbox, ellipses, calc, advanced selectors, 3D transitions and filters are things that I’ve dabbled with, but I never really spent time with Grid. I’ve taken my head out of the sand and it’s clear that Grid is one of the most important additions to CSS.

The CSS Grid Layout is clearly a much more robust solution than previous hacks that purported themselves as grid systems — built on floats, clears, inline-blocks, empty container divs and so on. Everything has it’s place (flexbox and floats are still great tools), but in a world where we want the best SEO, and semantic, easy-to-read HTML, it seems that The CSS Grid Layout is the best way to architect the overall layout of sites going forward.

To be clear, other CSS is still great. It’s maybe just more relevant for what it was meant for instead of an entire site layout. It’s kind of like how we used tables for layouts back in the early days… *shudder*

Browser Support

All major modern browsers support CSS Grid Layout (partial support on IE10+ with an -ms- prefix). I can’t see any reason not to make the switch. The benefits are more significant that than cons in my opinion. Apart from layouts that would rely on it for heavy graphical / presentation choices, the fallback would simply end up being a more “mobile-style” single column layout presentation. This may not be 100% ideal, but I think certain things can get away with it…

Unless analytics say that IE8 users are your people, I think this is a major GO. Using the CSS Grid Layout treats the content as the star and media queries come to the rescue to make sure you can move the grids around as needed. The HTML is clean. The CSS is clean.

Check out this terrific post at https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ for some progressive enhancement trickery too. Clever.

Learning it

As of this post, this site is not using CSS Grid. Whaaaaa! Yes, I know… But, I’m still learning it and again as of this writing, this site is just using an off-the-shelf free WordPress theme. This could change soon, but for now it’s just an easy way to quickly publish content. For learning, I found this wonderful resource at https://gridbyexample.com/. I really love this page. There are great templates to get started understanding it better. I’ve just copied one of the basic templates and tweaked it a bit — you can see this at https://jeff-sawyer.com/cssgrid/ (Edit: I’ve made some changes to this since this was posted, but have kept a few backups index-old1.html, old2, old3… poor man version control 🙂 ).

Edit (11/4/2018): I’ve now used this in an Angular app hosted here: https://sawyer-portfolio.herokuapp.com/. I’m working to update this as a process of familiarizing myself more with Angular. So far, so good!

There’s a ton of content on YouTube and I really recommend checking it out. I googled around for CSS Grid WordPress templates and didn’t find a lot of options out there. Honestly though, it’s tough because “grid” is accurate name, but kind of a terrible name. We’ve been referring to things as “grid” for years…

That’s all for now. Back to learning…