Practical CSS Grid /Link
Me, writing for A List Apart, taking you on a detailed, illustrated walkthrough of how I added CSS Grid layout to meyerweb.com, while still leaving the old layout in place for non-Grid browsers.
…In the run-up to Grid support being released to the public, I was focused on learning and teaching Grid, creating test cases, and using it to build figures for publication. And then, March 7th, 2017, it shipped to the public in Firefox 52. I tweeted and posted an article and demo I’d put together the night before, and sat back in wonderment that the day had finally come to pass. After 20+ years of CSS, finally, a real layout system, a set of properties and values designed from the outset for that purpose.
And then I decided, more or less in that moment, to convert my personal site to use Grid for its main-level layout.
Me, writing for A List Apart, taking you on a detailed, illustrated walkthrough of how I added CSS Grid layout to meyerweb.com, while still leaving the old layout in place for non-Grid browsers. As I write this, Grid is available in the latest public releases of Firefox, Chrome, and Opera, with Safari likely to follow suit within the next few weeks. Assuming the last holds true, that’s four major browsers shipping major support in the space of one month. As Jen Simmons hashtagged it, it’s a new day in browser collaboration.
As I’ve said before, I understand being hesitant. Based on our field’s history, it’s natural to assume that Grid as it stands now is buggy, incomplete, and will have a long ramp-up period before it’s usable. I am here to tell you, as someone who was there for almost all of that history, Grid is different. There are areas of incompleteness, but they’re features that haven’t been developed yet, not bugs or omissions. I’m literally using Grid in production, right now, on this site, and the layout is fine in both Grid browsers and non-Grid browsers (as the article describes). I’m very likely to add it to our production styles over at An Event Apart in the near future. I’d probably have done so already, except every second of AEA-related work time I have is consumed by preparations for AEA Seattle (read: tearing my new talk apart and putting it back together with a better structure).
Again, I get being wary. I do. We’re used to new CSS stuff taking two years to get up to usefulness. Not this time. It’s ready right now.
So: dive in. Soak up. Enjoy. Go forth, and Grid.
Published on 24 Mar 2017 at 02:09PM