Rachel Andrew: CSS grid layout module

Rachel Andrew (@rachelandrew) was speaking about CSS grid layout module at Responsive Day Out, these are my notes from her talk.

• First public draft April 2011
• Proposal developed by Microsoft (IE10)
• Spec has moved on and now very different
• Latest draft now in Chrome Canary

display: grid | inline grid;

Without defending grid content all stacks.

grid-template-columns and grid-template-rows.  Defaults to row 1, col 1.

grid-column-start and -end - similar for grid-row-*  [short hand grid-[column | row]: X / Y;] These define where the content is put into the grid.  Gutters are put in as empty columns.

We can use media queries to redefine properties.  We can start with source order then add in some rows and columns at break points.  We no longer have to manipulate the source to change the order.

Working out which col and row can get tricky.  Can use named grid template areas to place content:  grid-area: name;.  Can order these:

grid-template-area: "name1", "name2", "name3";

Can do more advanced layout with grid area names:

grid-template-areas:
        ". . subhead"
        "nav . feature"
        "nav . content"
        "nav . quote";

There is a repeat keyword that will allow you to define cols or rows once and apply it multiple times.

span keyword can be used to span across gutters.

You are always working from the lines, not the columns themselves.  Once you start playing around with things it starts to make sense.  Don't have to worry about the source order.

Grid is good for macro layouts, flexbox is good for micro UX elements.