Grid in CSS

The CSS properties that allow you to use the CSS Grid capabilities

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#grid-area

Shorthand property for grid-row-start grid-column-start grid-row-end and grid-column-end.

default grid-area: auto;

The grid item's column and row starts and ends are automatically set.

grid-area: main;

You can use an area name.

#grid-auto-columns

Defines the size of grid columns that were created implicitly: it means that grid-auto-columns targets the columns that were not defined with grid-template-columns or grid-template-areas.

default grid-auto-columns: auto;

The implicity-created columns have an auto size.

grid-auto-columns: 100px;

Here we combine grid-template-areas: "header header header" "sidebar main main" with grid-template-columns: 50px 200px.

In this situation, the grid-template-areas defines 3 columns, while the grid-template-columns only defines 2 column widths.

As a result, the third column width takes its value from the grid-auto-columns property: 100px.

#grid-auto-flow

Defines the position of auto-generated grid items.

default grid-auto-flow: row;

Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it on its own row.

grid-auto-flow: column;

Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it in its own column.

#grid-auto-rows

Defines the size of grid rows that were created implicitly: it means that grid-auto-rows targets the rows that were not defined with grid-template-rows or grid-template-areas.

default grid-auto-rows: auto;

The implicity-created rows have an auto size.

grid-auto-rows: 100px;

Here we combine grid-template-areas: "header header header" "sidebar main main" "footer footer footer" with grid-template-rows: 50px 200px.

In this situation, the grid-template-areas defines 3 rows, while the grid-template-rows only defines 2 row heights.

As a result, the third row height (the footer) takes its value from the grid-auto-rows property: 100px.

#grid-column-end

Defines the column end position of a grid item.

default grid-column-end: auto;

In this 3-column setup, the grid item is automatically placed.

grid-column-end: 2;

The target grid item ends just before the second column.

grid-column-end: 1;

The target grid item ends just before the first column, which automatically creates a fourth column.

#grid-column-gap

Defines the gutter between the columns of a grid container.

default grid-column-gap: 0;

Removes the gap.

grid-column-gap: 10px;

You can use pixel values.

grid-column-gap: 3rem;

You can use (r)em values.

grid-column-gap: 20%;

You can use percentage values.

#grid-column-start

Defines the column start position of a grid item.

default grid-column-start: auto;

In this 3-column setup, the grid item is automatically placed.

grid-column-start: 2;

The target grid item is placed on the second column.

grid-column-start: 4;

The target grid item is placed outside the grid, in an auto-generated fourth column.

#grid-column

Shorthand property for grid-column-start and grid-column-end.

default grid-column: auto auto;

The grid item's column start and end are automatically set.

grid-column: 1 / 3;

The grid item starts before the first column and ends just before the third one.

grid-column: span 3;

The grid item spans 3 columns.

grid-column: 1 / span 4;

The grid items starts before the first column and spans for 4 columns, creating a new one in the process.

grid-column: main;

You can use an area name to "copy" its column start and end positions.

#grid-gap

Shorthand property for grid-row-gap and grid-column-gap.

default grid-gap: 0 0;

Removes both rows and columns gaps.

grid-gap: 10px;

You can set a single value.

grid-gap: 3rem 1rem;

You can set a value for each direction: rows first, columns second.

#grid-row-end

Defines the row end position of a grid item.

default grid-row-end: auto;

In this 3-column setup, the grid item is automatically placed.

grid-row-end: 3;

The target grid item ends just before the third row.

grid-row-end: 4;

The target grid item ends just before the fourth row, which automatically creates a third row.

#grid-row-gap

Defines the gutter between the rows of a grid container.

default grid-row-gap: 0;

Removes the gap.

grid-row-gap: 10px;

You can use pixel values.

grid-row-gap: 3rem;

You can use (r)em values.

#grid-row-start

Defines the row start position of a grid item.

default grid-row-start: auto;

In this 3-column setup, the grid item is automatically placed on the first row.

grid-row-start: 2;

The target grid item is placed on the second row.

grid-row-start: 3;

The target grid item is placed outside the grid, in an auto-generated third row.

#grid-row

Shorthand property for grid-row-start and grid-row-end.

default grid-row: auto auto;

The grid item's row start and end are automatically set.

grid-row: 1 / 3;

The grid item starts before the first row and ends just before the third one.

grid-row: span 3;

The grid item spans 3 rows.

grid-row: 1 / span 4;

The grid items starts before the first row and spans for 4 rows, creating a new one in the process.

grid-row: header;

You can use an area name to "copy" its row start and end positions.

#grid-template-areas

Defines areas within a grid container. These areas can then be referenced when placing a grid item.

default grid-template-areas: none;

No area is defined.

grid-template-areas: "header header header" "sidebar main main";

You can use area names to specify which cells each grid item should occupy.

#grid-template-columns

Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

default grid-template-columns: none;

No columns are defined, so you only have one.

grid-template-columns: auto auto auto;

You can use the keyword auto so that each column resizes itself automatically.

grid-template-columns: 80px auto 1rem;

You can mix the units.

grid-template-columns: 40px 1fr 2fr;

You can use the fr flex unit to distribute the remaining space across all flex columns.

#grid-template-rows

Defines the rows of a grid container. You can specify the width of a row by using a keyword (like auto) or a length (like 10px). The number of rows is determined by the number of values defined in the space-separated list.

default grid-template-rows: none;

No rows are defined.

grid-template-rows: 120px auto 3rem;

You can mix the units.

grid-template-rows: 20px 1fr 2fr;

You can use the fr flex unit to distribute the remaining space across all flex rows.

#grid-template

Shorthand property for grid-template-rows grid-template-columns and grid-template-area.

default grid-template: none;

No rows, columns, or areas are defined.

grid-template: 200px 1fr / 100px auto 3rem;

You can define rows first, columns second, by splitting them with a slash /.

grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;

You can define both areas and rows and columns dimensions. In this case, each set of areas have a row size attached to it. The first row is 50px high, the second one is 200px high. The sidebar column is 100px wide, while the main column's width is set to auto and takes up the remaining width.

#grid

Shorthand property for grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns and grid-auto-flow.

grid: "header header header" 50px "sidebar main main" 200px / 100px auto;

You can use it as grid-template by setting all explicit rows, columns, and areas.

grid: 200px 100px / auto-flow 30%;

You can combine grid-template-rows with grid-auto-columns.

grid: auto-flow 50px / 200px 100px;

You can combine grid-auto-rows with grid-template-columns.