CSS Grid
CSS Grid is a new capability in CSS that allows designers to lay out the site content in a flexible grid structure defined by the stylesheets and not the HTML. One benefit is that the HTML can be the canonical syntax for the site (and what it makes sense to listen to if the user's on a screen reader) while improving visual display and using elements of Visual Design falls to the CSS layer to handle. For the UX Designers, this means more flexibility in layout, a return to Graphic Design Principles, and a bit more creativity. For front-end Developers, this means a heck of a lot less math in the CSS style sheets, among other benefits.
Articles about bits of the standard
- grid-column-gap on the Mozilla Developer Network
- Aligning and justifying grid items on Grid by Example by Rachel Andrew is a video about how the justify and align settings work.
- Auto-Sizing Columns in CSS Grid: 'auto-fill' vs 'auto-fit' by Sara Soueidan at CSS-Tricks
External Guides
- A Complete Guide to CSS Grid by Chris House on CSS-Tricks
- Should I use Grid or Flexbox? by Rachel Andrew
- CSS Grid Fallbacks and Overrides by Rachel Andrew
- CSS Grid Layout and Progressive Enhancementby Rachel Andrew on the Mozilla Developer Network
- Should I try to use the IE Implementation of CSS Grid Layout? by Rachel Andrew
- Accurately checking for CSS Grid in Microsoft Edge by Greg Whitworth
Tutorials
- Learn CSS Grid by @jonsuh
- Grid Garden by CodePip. This is a great game for learning the basics of Grid.
- Grid By Example by Rachel Andrew is a site filled with examples, UI patterns, tutorials, and page layouts.
Additional Resources
I attended An Event Apart Seattle 2017, where a few sessions concentrated on using CSS Grid:
- Rachel Andrew gave a talk called New CSS Layout Meets the Real World, which provides multiple examples of popular design patterns and how they can be implemented in CSS Grid. Conference notes
- Jennifer Simmons gave a talk called Designing with Grid which covered a number of graphic design principle basics, explained why designing with only a few tools can be harmful to the experience for the user, and provided multiple examples of graphic designs rendered in CSS Grid. Conference notes
Rachel Andrew has a GIT repository specifically for anyone to ask her anything about CSS Grid. CSS Grid AMA