A quick fire presentation through some of the features of CSS Grid Layout as implemented in Chrome. This 20 minute presentation was for Responsive Day Out in Brighton, June 2014.
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, 27 June 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, 27 June 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, 27 June 14
screen and (min-width: 460px) { .wrapper { display: grid; grid-template-columns: auto ; grid-template-rows: auto auto auto auto; } } Friday, 27 June 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, 27 June 14
breakpoint. @media only screen and (min-width: 700px) { .wrapper { grid-template-columns: 20% 5% auto ; grid-template-rows: auto auto auto; } Friday, 27 June 14
@media only screen and (min-width: 460px) and (max-width: 700px){ .wrapper { display: grid; width: 90%; grid-template-columns: auto ; grid-template-rows: auto auto auto auto auto; grid-template-areas: "nav" "subhead" "quote" "content" "feature"; } } Friday, 27 June 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, 27 June 14