HTML and CSS Reference
In-Depth Information
• Browser support: IE 10+
Grid properties allow you to throw block-level elements into a grid cell,
irrespective of the flow of content within the grid parent element. An
element becomes a grid when
display
is set to
grid
.
You can then set
the number of columns and rows with the
grid-columns
and
grid-rows
properties, respectively. You can then declare each child selector itself as
part of a grid cell, like so:
#title {
grid-column: 1; grid-row: 1;
}
#score {
grid-column: 2; grid-row: 1;
}
You can also use a template to plan the grid:
body {
grid-template: "ta"
"sa"
"bb"
"cc";
}
In this syntax, each string refers to a row, and each character refers to a grid
cell. In this case, the content of grid cell represented by the character
a
spans two rows but just one column, and the content represented by
b
spans two columns but just one row.
Now you can set any of the child element's
grid-cell
position:
#title {
grid-cell: 't';
}
