CSS Grid

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

External Guides

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

Anne Gibson 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