Proposal developed by Microsoft • Early implementation in IE10 • Spec has moved on. Is now very different to the IE10 implementation. • Latest Working Draft 13 May 2014 • Implementation in Chrome (Experimental) Friday, 29 August 14
lines are those that you specify and give sizing information to • Implicit lines are created when you place something into a row or column you have not specified with grid-template-rows or grid- template-columns Friday, 29 August 14
line after. grid-row-start is the line above the content. grid-row-end the line below. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
the line after. For rows start is the line above, and end the row below. .content { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } Friday, 29 August 14
once. The order of the values is: - grid-row-start - grid-column-start - grid-row-end - grid-column-end .content { grid-area: 2 / 3 / 3 / 4; } Friday, 29 August 14
on the grid. I am using the shorthand grid- row property here to define start and end. .mainnav { grid-row: 1 / 2; } .subhead { grid-row: 2 / 3; } .quote { grid-row: 3 / 4; } .content { grid-row: 4 / 5; } Friday, 29 August 14
breakpoint. @media only screen and (min-width: 700px) { .wrapper { grid-template-columns: 20% 5% auto ; grid-template-rows: auto ; } Friday, 29 August 14
line and NOT the column area. grid-template-columns: (nav-start) 200px (nav-end) 40px (content-start) auto (content-end) 40px (side-start) 200px (side-end); .content { grid-column: content-start / content-end; } Friday, 29 August 14
am also giving my grid lines names of col, row and gutter by adding a name for that line. .wrapper { display:grid; grid-template-columns: (gutter) 1fr repeat(16, (col) 4.25fr (gutter) 1fr ); grid-template-rows: repeat(9, (row) auto (gutter) 20px ); } Friday, 29 August 14