CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 268

EXPLORING GRIDS

The CSS Grid Positioning Module Level 3 ( www.w3.org/TR/css3-grid) is designed
to allow web designers to lay out web pages neatly in a stable grid. You most likely
already do this, but usually you create your own grid system or use a third-party
framework, such as 960 ( http://960.gs) or Blueprint CSS ( http://blueprintcss.org).
CSS3 grids offer a simple native way of creating your own grid system, which has
to be a good thing.
At the time of this writing, CSS3 grids are only supported by IE10 and nightly
builds of the WebKit browsers (with -ms- and -webkit- prefixes, respectively), so I
won't cover them in depth. However, I'll provide you with a solid example of how
to use them, because they are bound to be important in the future.
In this example you'll put together a simple grid layout using these nu-schule-
kool-toolz (technical term.)

DEFINING THE GRID STRUCTURE

In a similar fashion to Flexbox, CSS3 grids work by using a custom value of the
display property, grid , to designate a container as an area of the page that will
be laid out using CSS3 grids (look at the file simple-grid.html in the chapter7 code
download folder to follow along with this first example):

body {
: ;
}