Site Studio
Grid item properties
Grid item properties control the placement and alignment of child elements in a grid container. The parent element must have the display: grid property set.
The grid-column-start property specifies the column line where the item starts.
| Option | Behavior |
|---|---|
2 | Start at column line 2 |
span 2 | Span two columns from the current position |
-1 | Start at the last column line |
The grid-column-end property specifies the column line where the item ends.
| Option | Behavior |
|---|---|
4 | End at column line 4 |
span 2 | Span two columns |
-1 | End at the last column line |
The grid-row-start property specifies the row line where the item starts.
| Option | Behavior |
|---|---|
1 | Start at row line 1 |
span 2 | Span two rows from the current position |
The grid-row-end property specifies the row line where the item ends.
| Option | Behavior |
|---|---|
3 | End at row line 3 |
span 2 | Span two rows |
The grid-column property is a shorthand for grid-column-start and grid-column-end.
| Option | Behavior |
|---|---|
1 / 3 | Start at line 1 and end at line 3 |
1 / span 2 | Start at line 1 and span two columns |
1 / -1 | Span from the first column to the last column |
The grid-row property is a shorthand for grid-row-start and grid-row-end.
| Option | Behavior |
|---|---|
2 / 4 | Start at line 2 and end at line 4 |
1 / span 2 | Start at line 1 and span two rows |
1 / -1 | Span from the first row to the last row |
The grid-area property assigns the item to a named area or specifies all four placement properties.
Use named areas: Assign to areas such as header, sidebar, or footer.
Use line numbers:
| Option | Behavior |
|---|---|
1 / 2 / 3 / 4 | row-start / column-start / row-end / column-end |
1 / 1 / 2 / -1 | First row and all columns |
The justify-self property aligns the item in its cell along the row axis.
| Option | Behavior |
|---|---|
auto | Inherit from the container. auto is the default selection. |
start | Align to the start |
end | Align to the end |
center | Center in the cell |
stretch | Fill the cell width |
The align-self property aligns the item in its cell along the column axis.
| Option | Behavior |
|---|---|
auto | Inherit from the container. auto is the default selection. |
start | Align to the start |
end | Align to the end |
center | Center in the cell |
stretch | Fill the cell width |
The place-self property is a shorthand for align-self and justify-self.
| Option | Behavior |
|---|---|
auto | Inherit from the container |
start | Align to the end on both axes |
end | Align to the end on both axes |
center | Center from both axes |
stretch | Fill cell on both axes |
start center | Start vertically and center horizontally |
end center | End vertically and center horizontally |
center start | Center vertically and start horizontally |
center end | Center vertically and end horizontally |
Grid container properties: Set up the grid structure.
Flex item properties: Alternative layout system.
Display properties: Set the display mode.
For more information about CSS grid layout, visit MDN: CSS Grid Layout and CSS-Tricks: Complete Guide to Grid.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
-1 |
| End at the last column line |
The grid-row-start property specifies the row line where the item starts.
| Option | Behavior |
|---|---|
1 | Start at row line 1 |
span 2 | Span two rows from the current position |
The grid-row-end property specifies the row line where the item ends.
| Option | Behavior |
|---|---|
3 | End at row line 3 |
span 2 | Span two rows |
The grid-column property is a shorthand for grid-column-start and grid-column-end.
| Option | Behavior |
|---|---|
1 / 3 | Start at line 1 and end at line 3 |
1 / span 2 | Start at line 1 and span two columns |
1 / -1 | Span from the first column to the last column |
The grid-row property is a shorthand for grid-row-start and grid-row-end.
| Option | Behavior |
|---|---|
2 / 4 | Start at line 2 and end at line 4 |
1 / span 2 | Start at line 1 and span two rows |
1 / -1 | Span from the first row to the last row |
The grid-area property assigns the item to a named area or specifies all four placement properties.
Use named areas: Assign to areas such as header, sidebar, or footer.
Use line numbers:
| Option | Behavior |
|---|---|
1 / 2 / 3 / 4 | row-start / column-start / row-end / column-end |
1 / 1 / 2 / -1 | First row and all columns |
The justify-self property aligns the item in its cell along the row axis.
| Option | Behavior |
|---|---|
auto | Inherit from the container. auto is the default selection. |
start | Align to the start |
end | Align to the end |
center | Center in the cell |
stretch | Fill the cell width |
The align-self property aligns the item in its cell along the column axis.
| Option | Behavior |
|---|---|
auto | Inherit from the container. auto is the default selection. |
start | Align to the start |
end | Align to the end |
center | Center in the cell |
stretch | Fill the cell width |
The place-self property is a shorthand for align-self and justify-self.
| Option | Behavior |
|---|---|
auto | Inherit from the container |
start | Align to the end on both axes |
end | Align to the end on both axes |
center | Center from both axes |
stretch | Fill cell on both axes |
start center | Start vertically and center horizontally |
end center | End vertically and center horizontally |
center start | Center vertically and start horizontally |
center end | Center vertically and end horizontally |
Grid container properties: Set up the grid structure.
Flex item properties: Alternative layout system.
Display properties: Set the display mode.
For more information about CSS grid layout, visit MDN: CSS Grid Layout and CSS-Tricks: Complete Guide to Grid.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio