CSS Grid layout


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:

    "header header header"
    "menu content content"
    "footer footer footer";

Assign the areas to the elements:

#header { grid-area: header; }


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.

© Alessandro Dotti Contra :: VAT # IT03617481209 :: This site uses no cookies, read our privacy policy for more information.