CSS Grid - 18 Properties and its Values (Reference)
Css
6
The CSS grid is a layout model that allows you to create a grid of cells, each of which can contain content. The grid is a two-dimensional structure that consists of rows and columns.
Grid properties:
grid
A shorthand property for grid-* that specifies the grid columns, rows, and areas.
grid: none;
grid: grid-template-rows / grid-template-columns;
grid: grid-template-areas;
grid: grid-template-rows / [grid-auto-flow] grid-auto-columns;
grid: [grid-auto-flow] grid-auto-rows / grid-template-columns;
grid: initial;
grid: inherit;
grid-template
A shorthand property for grid-template-* that specifies the grid template-columns, template-rows, and template-areas.
grid-template: none;
grid-template: grid-template-rows / grid-template-columns;
grid-template: grid-template-areas;
grid-template: initial;
grid-template: inherit;
grid-template-columns
Specifies the size of the columns, and how many columns in a grid layout.
grid-template-columns: none;
grid-template-columns: auto;
grid-template-columns: max-content;
grid-template-columns: min-content;
grid-template-columns: length;
grid-template-columns: initial;
grid-template-columns: inherit;
grid-template-rows
Specifies the size of the rows in a grid layout.
grid-template-rows: none;
grid-template-rows: auto;
grid-template-rows: max-content;
grid-template-rows: min-content;
grid-template-rows: length;
grid-template-rows: initial;
grid-template-rows: inherit;
grid-gap
A shorthand property for the grid-row-gap and grid-column-gap properties.
grid-gap: grid-row-gap grid-column-gap;
grid-column-gap
Specifies the size of the gap between columns.
grid-column-gap: length;
grid-row-gap
Specifies the size of the gap between rows.
grid-row-gap: length;
grid-auto-columns
Specifies a default column size.
grid-auto-columns: auto;
grid-auto-columns: max-content;
grid-auto-columns: min-content;
grid-auto-columns: length;
grid-auto-rows
Specifies a default row size.
grid-auto-rows: auto;
grid-auto-rows: max-content;
grid-auto-rows: min-content;
grid-auto-rows: length;
grid-auto-flow
Specifies how auto-placed items are inserted in the grid.
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
grid-template-areas
Specifies how to display columns and rows, using named grid items.
grid-template-areas: none;
grid-template-areas: itemnames;
grid-area
Either specifies a name for the grid item, or this property is a shorthand property
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
grid-area: itemname;
grid-column
A shorthand property for the grid-column-start and grid-column-end properties.
grid-column: grid-column-start / grid-column-end;
grid-column-start
Specifies where to start the grid item.
grid-column-start: auto;
grid-column-start: span n;
grid-column-start: column-line;
grid-column-end
Specifies where to end the grid item.
grid-column-end: auto;
grid-column-end: span n;
grid-column-end: column-line;
grid-row
A shorthand property for the grid-row-start and the grid-row-end properties.
grid-row: grid-row-start / grid-row-end;
grid-row-start
Specifies where to start the grid item.
grid-row-start: auto;
grid-row-start: row-line;
grid-row-end
Specifies where to end the grid item.
grid-row-end: auto;
grid-row-end: row-line;
grid-row-end: span n;
Prev
8
7
2
3
7
0
7