CSS Grids are coming (in March 2017). Thanks to Sebastian Zartner, we
have a pretty up-to-date set of reference articles, but we still miss
introductory material so that Web devs can learn about grid techniques.
I've spent some time with the specs, our documentation, but also reading
numerous articles and introductory material on the Web, as well as
watching some conferences online and I have a first draft of what I
believe is needed so that Web devs can go from the 'I don't know what
CSS Grids are' to 'I know what they are, how they work, now I can start
using it', the 2nd step on the proficiency scales.
Take some time to have a look at them; I'm especially interested about
comments around the structure and the completeness. Don't spent too much
time on the wording of the articles (they can be changed later).
Thank you all for your help!
CSS Grids user guides (first draft)
Overview page, links to all CSS grids resources we have.
Basic concepts of a CSS Grid
Describes the basic notions around CSS Grids: what are a grid,
containers, items, lines, tracks, cells, areas, rows, columns, gutters,
nested grids, (sub grids, in the future)
Using grid templates to describe a CSS Grid
Uses grip-templates(-columns, -rows) to describe different CSS grid
and succinctly explains how to position grid items into it (link to more
Interaction between CSS Grids and the writing mode
Explain the numeration of grid lines, and -start & -end names, and
their meaning w/ different writing-modes.
Laying out using anonymous line-based placement in a CSS Grid.
In-depth explanation of how to place CSS items using numbered grid
Laying out using named grid lines
In-depth explanation of how to place CSS items using named grid lines
Laying out using named area (and implicitly named grid lines)
In-depth explanation of how to place CSS items using areas (ascii’s
description in grid-template-areas) and -start/-end implicitly named
Mastering box alignment within a CSS Grid
How to use box alignment properties to align an item inside its
CSS Grids and accessibility
How grids helps accessibility (by decoupling semantic ordering and
layout ordering), what are the risks (tab ordering, HTML flattening) and
how to mitigate them
CSS Grids and progressive enhancement
How to introduce css grids today, and how to use it w/ PE, media
queries and feature queries.
Traditional layouts w/ CSS Grids: (2 articles, very concrete)
- Holy grail layout
- 12-columns layout
Glossary entries (w/ graphics):
Senior St. Project Manager, Developer Documentation / MDN