CSS GRID LAYOUT is nearly finalized. Which means it’s time for designers and front-end developers to set the flags enabling their browsers to support the new specification, put CSS Flexbox through its paces by using it to create layouts, and see if anything breaks. This way, if anything does break, we’ll have time to tell the framers of CSS Grid Layout what happened, and get the spec (and browser support) fixed before it is released. Once Grid is finalized, it will be too late to fix oversights.
The links below can help you (and me) get up to speed with the new tech:
CSS Grid Layout and CSS Flexbox Links
- CSS Grid Spec
- How to enable CSS Grid Layout in your browser
- Grid By Example: Learn CSS Grid Layout by doing, with these incredibly useful examples by Rachel Andrew. Newly updated. Fun!
- A Complete Guide to Grid by Chris Coyier
- A Complete Guide to Flexbox by Chris Coyier
- Though CSS Flexbox is better suited to laying out modules (rather than entire pages—that’s what Grid is for), Phillip Walton has used it to solve a classic CSS page layout problem: Holy Grail layout in Flexbox
- Vertical centering? Easy. Equal height columns? By default. Paul Robert Lloyd gets to grips with CSS Flexbox and finds a lot to like: CSS Flexbox Is Entirely Logical (Almost)
- Three Years with CSS Grid Layout by Rachel Andrew
- Grid, Flexbox, Box Alignment: Our New System for Layout by Rachel Andrew
- CSS Grid Layout Examples: Several examples showing different CSS Grid Layout use cases
- CSS Grid and the Box Alignment Module
Thank You
Additional link curation by Rachel Andrew, author of Get Ready for CSS Grid Layout from A Book Apart, and speaker extraordinaire at An Event Apart Nashville, a three-day conference that wrapped yesterday. For a ton of great web resources, see AEA Resources: Articles, Links, and Tools From An Event Apart Nashville 2016.
