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.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio