Grid Layout 221
Combining Explicit and Implicit Grids
When you create explicit grids, you may find that the number of available
grid tracks is fewer than you need for your items. Say you have a three-
column grid, but a grid item is supposed to span four columns:
E { grid-template-columns: repeat(3, 1fr); }
F { grid-column: 1 / 5; }
In this case, the grid will expand to contain the tracks created by
the item; an extra column will be added to the grid, making four in total.
You can set the size of these extra tracks with the grid-auto-columns and
grid-auto-rows properties.
The following code creates an explicit grid of three columns and
two rows and allows for any items exceeding this explicit grid by adding
an implicit grid. The extra columns in the implicit grid are defined as 1fr
wide, with extra rows being 80px high:
E {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 80px);
grid-auto-columns: 1fr;
grid-auto-rows: 80px;
}
Now any items placed in this grid will fill an area that matches the
dimensions of the explicit grid.
The grid Shorthand
Defining a grid with both explicit and implicit properties can lead to a
large list of rules. For example, the following code shows an element with
rules to create an explicit grid with named areas, as well as implicit grid
properties to allow for any items that might extend the grid, giving you a
total of six rules:
E {
grid-template-areas: 'a b b' 'a c d';
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px auto;
grid-auto-flow: row;
grid-auto-columns: 1fr;
grid-auto-rows: 80px;
}
