CSS3 Grid Layout Module, an Introduction

The CSS3 Grid Layout Module has changed quite a lot since it’s incarnation when it shipped with IE10. At Responsive Day Out 2, Rachel Andrew gave an easy to follow practical talk of the current implementation (as it appears in Google Chrome Canary). The slides of this talk are embedded below:

The key thing to keep in mind when working with the Grid Layout Module is that you – when specifying stuff using grid-column and grid-row – target lines of the grid, not the columns of the grid. Using grid-column: 1/3; for example will span an element from the first line to the third line of the grid, ergo it will span 2 columns.

.wrapper {
  display: grid;
  grid-template-columns: 200px 40px auto 40px 200px;
  grid-template-rows: auto 1fr;
}

.content {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

View example →

The CSS3 Grid Layout Module shows its real power with Grid Template Areas: Just assign an element to a grid-area and then lay them out using grid-template-areas on the wrapping element. Combine the latter with media queries and you can very easily implement various layouts, no matter what the order of the source code.

.mainnav {
  grid-area: nav;
}
.subhead {
  grid-area: subhead;
}
.quote {
  grid-area: quote;
}
.content {
  grid-area: content;
}
.feature-image {
  grid-area: feature;
}

@media only screen and (min-width: 980px) {
  .wrapper {
    display: grid;
	 grid-template-columns: 200px 40px auto 40px 200px;
	 grid-template-rows: auto auto auto;
	 grid-template-areas: 
       ". . subhead . ."
       "nav . feature . quote"
       "nav . content . quote";
  }	
}

View example →

CSS Grid Layout: getting to grips with the Chrome implementation →
CSS Grid Layout →