Getting Grid

That converting-meyerweb-to-Grid article I’ve mentioned previously is still coming along (3,999 words as of the last draft, and I realized last night it needs another few hundred) and I think it will be out within a week.  I’ll do my best!  In the meantime, I’d like to point you to a few resources from the end of the article, plus do a tiny bit of self-promotion.

Resources first!  If you’re wondering what Grid means for Flexbox, Chen Hui Jing has a lovely piece on “Grid + Flexbox: the best 1-2 punch in web layout”.  Just the right length, with live Codepens, this is a very good introduction to using Grid and Flexbox in harmony.  Some of what’s described there won’t be as necessary in the future, as Flexbox-style alignment migrates to Grid, but in the meantime Hui Jing explores the current state of the art with elegance.

If you have Firefox or Chrome and they’re updated to the latest release (FF52, C57) then I strongly encourage you to set aside a few minutes and go browse The Experimental Layout Lab of Jen Simmons.  Jen’s been creating Grid demonstrations and experiments for well over a year now, and there are some really great examples there, summarizing some common design patterns and showing how Grid can make them much simpler and more robust.  I especially recommend the 2016 home page, which combines CSS Grid, writing modes, transforms, and design history to create something really great (try resizing to see the responsive coolness).  But don’t stop there!

If you like your learning in motion, Rachel Andrew’s video series introducing Grid concepts and properties is fabulous.  As an application developer — she’s part of the Perch CMS team — she’s been excited about Grid and what it can do longer than just about anyone.  Her deep technical skills and teaching abilities really come together in the video series.  If you prefer to read up on Grid, then Rachel’s written a series of articles for the Mozilla Developer Network that cover similar ground.

Finally, if you like extended technical explanations of every Grid property and value seasoned with lots of examples and screenshots, then I suggest picking up the Early Access version of CSS: The Definitive Guide, 4th Edition.  Estelle Weyl and I have been working on finishing this for a while now, and it’s just about ready: there are three chapters still to be added.  They’ve already been written, but haven’t quite finished first editorial review and production massaging.  But: the Grid chapter is already available, so if you get the book now, you’ll have instant access to something like 25,000 words going through Grid property by property.  And also a whooooole lot more words covering everything else in CSS.  (The current page count estimate for the book is 950.  Nine hundred fifty.  Yoinks.)

Go forth and Grid!

• Getting Grid was published on Tuesday, March 14th, 2017.
• It was assigned to the CSS and Grid categories.
• There has been one reply.