CSS Grid layout
Creation
On the target element set:
display: grid;
Set the size of the rows of the grid:
grid-template-row: ... ;
Set the size of the colums of the grid:
grid-template-colums: ... ;
The use of repeat() function is allowed with both properties.
grid-gap: ... ;
Sets the gap between grid items.
ASCII art syntax
Fill the grid with named areas across the grid cells:
grid-template-areas:
"header header header"
"menu content content"
"footer footer footer";
Assign the areas to the elements:
#header { grid-area: header; }
Responsiveness
grid-template-columns: repeat(auto-fill, minmax(<min>, <max>));
auto-fill enables automatic repetition of cells to fill the
available space.
grid-template-columns: repeat(auto-fit, minmax(<min>, <max>));
auto-fit is similar to auto-fill, but streches the cells to remove
the empty space.
Implicit grids
Implicit grids are automatically generated by the grid container, to
accomodate elements that do not fit in the explicit grid. They have a
content based size and can be set with the grid-auto-rows and
grid-auto-columns properties.
grid-auto-flow: <row|column>;
Controls if new rows or colums are created (rows by default).
Items placement
Grid starts at element (1,1).
Placement can be explicit by number:
grid-row-start: <n>; grid-row-end: <n>; grid-column-start: <n>; grid-column-end: <n>;
or by name:
grid-template-rows: [<name 1>] <size 1> ... [<name N>] <size N>; grid-template-columns: [<name 1>] <size 1> ... [<name N>] <size N>;
<name> must be defined in the grid-template-* properties.
Nested grids
Grids can be nested.
While CSS properties are inherited, grid specific properties are not inherited.
Grid alignment
align-items: ... ;
Sets the vertical alignment of all grid elements.
align-self: ... ;
Sets the element own vertical alignment; overrides the align-items value.
justify-items: ... ;
Sets the horizontal alignment of all grid elements.
justify-self: ... ;
Sets the element own horizontal alignment; overrides the
justify-items value.
justify-content: ... ;
Sets the horizontal alignment of the content of the grid as a whole.
align-content: ... ;
Sets the vertical alignment of the content of the grid as a whole.
Layering items
Items are ordered according to the raw document order (the order in which they appear in the source markup).
order: <n>;
Sets a custom order on a per item basis. z-index is also supported
and takes precedence over the order propiety.