A few weeks ago I was approached by the good people over at MDN, asking if I would be interested in writing a comprehensive resource for MDN on CSS Grid Layout. A series of guides to explain the grid specification with examples – ready for Grid shipping in Firefox 52 today.
I think that MDN is the best place for references and increasingly for learning web development, therefore I was very keen to add to that material and to create a learning resource for grid. Over the last couple of weeks I have written a book-worth of words and it is all available on MDN right now. It is still something of a work in progress, I’ve been working with Jean-Yves Perrier, who works on Developer Documentation for Mozilla, to get it all into the system and linked up. However there is plenty of stuff there to get you started.
The overview page can be found here. This links to all of the guides, the glossary entries and also the existing information about Grid properties. As part of this work I’m reviewing the existing material too, so over the next week or so I should get round all of the properties and make sure they represent any changes made to the specification. The eleven guides are as follows:
- Basics concepts of grid layout
- Relationship to other layout methods
- Line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in grid layout
- Box alignment in grid layout
- Grids, logical values and writing modes
- CSS Grid Layout and Accessibility
- CSS Grid Layout and Progressive Enhancement
- Realizing common layouts using grids
I’m really happy to have been able to do this work, and credit should be given to Mozilla for being willing to fund the creation of comprehensive material like this. On that subject, through 2017 I have some availability for writing, training or consulting work specifically around the subject of CSS Grid and layout in general. In a very direct sense, being paid for the things I know means that I can spend time on CSS WG stuff, or in creating the resources I publish over at Grid by Example and other places. Take a look here, and drop me a line if you have something interesting you might like some help with!