The CSS grid layout gives developers the ability to create a layout similar to when the Web was built with tables. Yet because this is done with CSS and not with HTML this allows many more possibilities such as having the grid respond with media queries, or alter it as needed without having to muck about in the html. It offers separation between html elements and their on-screen render. Elements in a CSS grid can do many things a table-based layout could not, such as the layering of elements.
To declare an element as a grind is simple. It’s simply a new value for the ‘display’ property. E.g:
.content {
display: grid;
}
The next bit is to set what the grid looks like, with support for near anything, from simple 2-3 column layouts, to full-on 16 column ones.
An example;
.content {
grid-template-coumns: 100px 10px 100px 10px 100px;
}
This will create a grid of three with 10px gutters. Next up, the rows;
.content {
grid-template-rows: auto 5px auto;
}
This creates three rows, one auto height, a 5px gutter and then another with height auto.
We can then set the position of elements, which is where things start to get really crazy. Some good examples can be found here: http://gridbyexample.com/examples/#example1
It’s all in development right now, but it is coming and it’s pretty cool. If you want to play around with the future of the web, it’s currently limited to Chrome with the ‘experimental web platform features’ enabled. It’s also in IE versions 10 and up.
Cheers,