| Grid Property |
Values |
Description |
Example Usage |
| display: grid; |
grid |
Sets the element as a grid container, enabling grid properties on its child elements. |
<div style="display: grid;">... |
| grid-template-columns |
auto, length, percentage, repeat(), minmax() |
Specifies the columns of the grid container.
auto: Automatically sizes the columns based on their content.length: Sets a fixed length for the columns.percentage: Sets the width of the columns as a percentage of the grid container.repeat(): Specifies a repeated pattern of column sizes.minmax(): Sets a range for the column sizes.
|
<div style="grid-template-columns: 1fr 200px auto;">... |
| grid-template-rows |
auto, length, percentage, repeat(), minmax() |
Specifies the rows of the grid container.
auto: Automatically sizes the rows based on their content.length: Sets a fixed length for the rows.percentage: Sets the height of the rows as a percentage of the grid container.repeat(): Specifies a repeated pattern of row sizes.minmax(): Sets a range for the row sizes.
|
<div style="grid-template-rows: 100px 1fr auto;">... |
| grid-gap |
length, percentage |
Specifies the gap between grid cells (both rows and columns).
length: Sets a fixed length for the gap.percentage: Sets the gap as a percentage of the grid container.
|
<div style="grid-gap: 10px;">... |
| grid-auto-rows |
auto, length, percentage, minmax() |
Specifies the height of grid rows that are created implicitly (not defined in the template).
auto: Automatically sizes the rows based on their content.length: Sets a fixed length for the rows.percentage: Sets the height of the rows as a percentage of the grid container.minmax(): Sets a range for the row sizes.
|
<div style="grid-auto-rows: 100px;">... |
| grid-auto-columns |
auto, length, percentage, minmax() |
Specifies the width of grid columns that are created implicitly (not defined in the template).
auto: Automatically sizes the columns based on their content.length: Sets a fixed length for the columns.percentage: Sets the width of the columns as a percentage of the grid container.minmax(): Sets a range for the column sizes.
|
<div style="grid-auto-columns: 200px;">... |
| grid-template-areas |
none, string |
Specifies named grid areas within the grid container by referencing the names defined in grid-area property of child elements. |
<div style="grid-template-areas: 'header header' 'sidebar main' 'footer footer';">... |
| justify-items |
start, end, center, stretch |
Specifies how grid items are aligned along the grid’s inline axis (column axis).
start: Aligns the items at the start of the column.end: Aligns the items at the end of the column.center: Centers the items horizontally in the column.stretch: Stretches the items to fill the column.
|
<div style="justify-items: center;">... |
| align-items |
start, end, center, stretch |
Specifies how grid items are aligned along the grid’s block axis (row axis).
start: Aligns the items at the start of the row.end: Aligns the items at the end of the row.center: Centers the items vertically in the row.stretch: Stretches the items to fill the row.
|
<div style="align-items: center;">... |
| justify-content |
start, end, center, stretch, space-around, space-between, space-evenly |
Specifies how grid items are distributed along the grid’s inline axis (column axis).
start: Aligns the items at the start of the container.end: Aligns the items at the end of the container.center: Centers the items horizontally in the container.stretch: Stretches the items to fill the container.space-around: Distributes the items with equal space around them.space-between: Distributes the items with equal space between them.space-evenly: Distributes the items with equal space around and between them.
|
<div style="justify-content: center;">... |
| align-content |
start, end, center, stretch, space-around, space-between, space-evenly |
Specifies how grid items are distributed along the grid’s block axis (row axis).
start: Aligns the items at the start of the container.end: Aligns the items at the end of the container.center: Centers the items vertically in the container.stretch: Stretches the items to fill the container.space-around: Distributes the items with equal space around them.space-between: Distributes the items with equal space between them.space-evenly: Distributes the items with equal space around and between them.
|
<div style="align-content: center;">... |
| grid-template |
none, string |
Shorthand property that combines grid-template-rows, grid-template-columns, and grid-template-areas into a single declaration. |
<div style="grid-template: 'header header' 100px / 1fr 200px;">... |
| grid-auto-flow |
row, column, dense, dense row, dense column |
Controls the auto-placement of grid items when there are more items than available cells in the grid container.
row: Places items sequentially in rows from left to right and top to bottom.column: Places items sequentially in columns from top to bottom and left to right.dense: Attempts to fill in empty cells by rearranging items to maximize space utilization.dense row: Combines row and dense behavior.dense column: Combines column and dense behavior.
|
<div style="grid-auto-flow: column;">... |
| grid-area |
none, string |
Specifies a grid item’s size and location within the grid by referencing the grid template areas specified in grid-template-areas. |
<div style="grid-area: header;">... |
| grid-column |
auto, span, start / end, number / span |
Specifies a grid item’s size and location within the grid by referencing specific columns.
auto: Automatically determines the size based on the content.span: Indicates the item should span a specific number of columns.start / end: Specifies the start and end columns for the item.number / span: Combines a specific column number and span value.
|
<div style="grid-column: 2 / 4;">... |
| grid-row |
auto, span, start / end, number / span |
Specifies a grid item’s size and location within the grid by referencing specific rows.
auto: Automatically determines the size based on the content.span: Indicates the item should span a specific number of rows.start / end: Specifies the start and end rows for the item.number / span: Combines a specific row number and span value.
|
<div style="grid-row: 1 / 3;">... |
| grid-column-start |
auto, span, number |
Specifies the start position of a grid item within the grid along the column axis.
auto: Automatically determines the start position.span: Indicates the item should start at a specific column and span multiple columns.number: Specifies the exact start column number for the item.
|
<div style="grid-column-start: 2;">... |
| grid-column-end |
auto, span, number |
Specifies the end position of a grid item within the grid along the column axis.
auto: Automatically determines the end position.span: Indicates the item should end at a specific column and span multiple columns.number: Specifies the exact end column number for the item.
|
<div style="grid-column-end: 4;">... |
| grid-row-start |
auto, span, number |
Specifies the start position of a grid item within the grid along the row axis.
auto: Automatically determines the start position.span: Indicates the item should start at a specific row and span multiple rows.number: Specifies the exact start row number for the item.
|
<div style="grid-row-start: 1;">... |
| grid-row-end |
auto, span, number |
Specifies the end position of a grid item within the grid along the row axis.
auto: Automatically determines the end position.span: Indicates the item should end at a specific row and span multiple rows.number: Specifies the exact end row number for the item.
|
<div style="grid-row-end: 3;">... |