The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Grid Layout 219

To use the property with named grid areas, you add the identifiers after

the slash, as in this example:

E { grid-template: repeat(3, 1fr) / 'nav head head'; }

And if you also want to define heights for the rows, you can add the

length value of the row after each identifier string. Let’s look back at the

full grid defined in the previous section:

E {

grid-template-areas:

'nav head head'

'nav main side';

grid-template-columns: repeat(3, 1fr);

grid-template-rows: 80px auto;

}

Here’s how that grid looks if written using the grid-template shorthand:

E {

grid-template: repeat(3, 1fr) / 'nav head head' 80px 'nav main side';

}

noTe I don’t declare the row height after the second named area string because it defaults
to auto.

Implicit Grids

Implicit grids are defined by their contents, rather than the specified length

values of explicit grids. When you don’t care how many rows or columns

there are in your grid, only that each item in the grid has a place, you can

use the grid-auto-columns and grid-auto-rows properties. Each property takes

a single value to specify the width of the row or column. For example, this

code says that any created columns should be 1fr wide, and that any new

rows should be 80px:

E {

display: grid;

grid-auto-columns: 1fr;

grid-auto-rows: 80px;

}

Now any item with a grid-column or grid-row value will be placed in the

grid, and the grid will automatically adjust its size to accommodate the

items, keeping all columns and rows at the set size. For example, the fol-

lowing code shows a grid item set to start in the second column of the first

row, and to span two rows and two columns. The grid will expand to fit this

item, as you can see in Figure 17-9.