Grid

Container

Display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Grid-template-columns, grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values.

Grid-template-areas

Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. Repeating the name of a grid area causes the content to span those cells. A period signifies an empty cell.

Grid-column-gap, grid-row-gap

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Grid-gap

A shorthand for grid-column-gap + grid-row-gap.

Justify-items

Aligns the content inside a grid item along the column axis (as opposed to align-items which aligns along the row axis).

Align-items

Aligns the content inside a grid item along the row axis (as opposed to justify-items which aligns along the column axis).

Justify-content

This property aligns the grid along the column axis (as opposed to align-content which aligns the grid along the row axis).

Align.-content

This property aligns the grid along the row axis (as opposed to justify-content which aligns the grid along the column axis).

Grid-auto-columns, Grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks).

Grid-auto-flow

This property controls how the auto-placement algorithm works. Any items not explicitly given a grid-row and grid-column will be auto aligned.

Child styles

Grid-column-start, grid-column-end, grid-row-start, grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. Can use names specified in grid-template-columns and grid-template-rows.

Grid-column, grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

Grid-area

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

Justify-self

Aligns the content inside a grid item along the column axis (as opposed to align-self which aligns along the row axis).

Align-self

Aligns the content inside a grid item along the row axis (as opposed to justify-self which aligns along the column axis).