220 Chapter 17
F {
grid-column: 2 / 4;
grid-row: 1 / span 2;
}Figure 17-9: An implicit grid created by the item it contains (lines added for clarity)Grid Items Without a Declared Place
What happens to children of the grid container that have no declared place
in the grid because they don’t have either grid-column or grid-row values?
They fall back to the default values of 1 and are stacked into the same cell
at row one, column one.
You can alter this default behavior with the grid-auto-flow property,
which ensures that any items without an assigned place are inserted into the
grid where space is available. You can also add a level of control over where
they’re placed. Here is the basic form of this rule:E { grid-auto-flow: keyword; }The keyword can be column or row. If you use column, items will fill empty
cells in columns, moving down the column; if you use use row, the items
will fill empty rows, moving across the row. For example, in Figure 17-10,
the container on the left has a grid-auto-flow value of column, so the items
that haven’t been placed fill the cells of each row down the current column
and then skip up to the next column when the first column is filled. On the
other hand, the container on the right has the value of row, so the items are
placed across the row until the row is filled, at which point the items move
to the second row.Figure 17-10: Comparing automatic flow: (left) items flowed into columns and (right) items
flowed into rows