Site Studio
Grid container properties
To transform an element into a grid container, set the display property to grid or inline-grid in Style Builder. All direct children of the element become grid items.
The grid-template-columns property defines the column structure of the grid.
| Option | Behavior |
|---|---|
1fr 2fr 1fr | Three columns with a 1:2:1 ratio |
repeat(3, 1fr) | Three equal columns |
repeat(auto-fit, minmax(250px, 1fr)) | Responsive columns |
The grid-template-rows property defines the row structure of the grid.
| Option | Behavior |
|---|---|
100px auto 50px | A fixed header and footer with flexible content |
repeat(3, 200px) | Three rows of 200px each |
The grid-template-areas property defines named grid areas to position items.
| Option |
|---|
"header header header" |
"sidebar main main" |
"footer footer footer" |
Items must reference these areas by using grid-area: header in the grid item properties.
The grid-template property is a shorthand for setting both grid-template-rows and grid-template-columns.
| Option | Behavior |
|---|---|
auto 1fr auto / 200px 1fr | Defines rows and columns |
100px 1fr / repeat(3, 1fr) | Defines two rows and three columns |
The gap property sets the spacing between rows and columns.
| Option | Behavior |
|---|---|
20px | A 20px gap between all rows and columns |
20px 40px | A 20px gap between rows and a 40px gap between columns |
| Option | Behavior |
|---|---|
row-gap | Sets the spacing between rows only |
column-gap | sets the spacing between columns only |
The display property sets the display mode for the grid container.
| Option | Behavior |
|---|---|
grid | Block-level grid container |
inline-grid | Inline-level grid container |
subgrid | Inherits the grid from the parent |
flex | Flexbox container |
inline-flex | Inline flexbox container |
Justify items: The justify-items property aligns grid items along the row axis.
Align items: The align-items property aligns grid items along the column axis.
Both the justify and the align properties include the following options:
| Option | Behavior |
|---|---|
start | Aligns to the start of cell |
end | Aligns to the end of cell |
center | Aligns in the center of cell |
stretch |
|
Justify content: The justify-content property aligns the entire grid within the container along the row axis.
Align content: The align-content property aligns the entire grid within the container along the column axis.
Both the justify and the align properties include the following options:
| Option | Behavior |
|---|---|
start | Aligns grid to the start |
end | Aligns grid to the end |
center | Aligns grid to the center |
stretch | Fills the container |
space-around | Provides equal space around columns |
space-between | Provides equal space between columns |
space-evenly | Provides equal space everywhere |
Grid auto columns: The grid-auto-columns property specifies the size of implicitly created columns.
Grid auto rows: The grid-auto-rows property specifies the size of implicitly created rows.
Grid auto flow: The grid-auto-flow property controls how auto-placed items are inserted.
| Option | Behavior |
|---|---|
row | Fills rows and adds new rows as necessary |
column | Fills columns and adds new columns as necessary |
dense | Fills holes in the grid |
This grid property is a shorthand for setting multiple grid properties simultaneously.
| Option | Behavior |
|---|---|
auto-flow / 1fr 1fr 1fr | Auto-flow rows with three columns |
100px 1fr / 200px 1fr | Defines explicit rows and columns |
Grid item properties: Control individual item placement.
Flex container 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.
| Three rows of 200px each |
The grid-template-areas property defines named grid areas to position items.
| Option |
|---|
"header header header" |
"sidebar main main" |
"footer footer footer" |
Items must reference these areas by using grid-area: header in the grid item properties.
The grid-template property is a shorthand for setting both grid-template-rows and grid-template-columns.
| Option | Behavior |
|---|---|
auto 1fr auto / 200px 1fr | Defines rows and columns |
100px 1fr / repeat(3, 1fr) | Defines two rows and three columns |
The gap property sets the spacing between rows and columns.
| Option | Behavior |
|---|---|
20px | A 20px gap between all rows and columns |
20px 40px | A 20px gap between rows and a 40px gap between columns |
| Option | Behavior |
|---|---|
row-gap | Sets the spacing between rows only |
column-gap | sets the spacing between columns only |
The display property sets the display mode for the grid container.
| Option | Behavior |
|---|---|
grid | Block-level grid container |
inline-grid | Inline-level grid container |
subgrid | Inherits the grid from the parent |
flex | Flexbox container |
inline-flex | Inline flexbox container |
Justify items: The justify-items property aligns grid items along the row axis.
Align items: The align-items property aligns grid items along the column axis.
Both the justify and the align properties include the following options:
| Option | Behavior |
|---|---|
start | Aligns to the start of cell |
end | Aligns to the end of cell |
center | Aligns in the center of cell |
stretch |
|
Justify content: The justify-content property aligns the entire grid within the container along the row axis.
Align content: The align-content property aligns the entire grid within the container along the column axis.
Both the justify and the align properties include the following options:
| Option | Behavior |
|---|---|
start | Aligns grid to the start |
end | Aligns grid to the end |
center | Aligns grid to the center |
stretch | Fills the container |
space-around | Provides equal space around columns |
space-between | Provides equal space between columns |
space-evenly | Provides equal space everywhere |
Grid auto columns: The grid-auto-columns property specifies the size of implicitly created columns.
Grid auto rows: The grid-auto-rows property specifies the size of implicitly created rows.
Grid auto flow: The grid-auto-flow property controls how auto-placed items are inserted.
| Option | Behavior |
|---|---|
row | Fills rows and adds new rows as necessary |
column | Fills columns and adds new columns as necessary |
dense | Fills holes in the grid |
This grid property is a shorthand for setting multiple grid properties simultaneously.
| Option | Behavior |
|---|---|
auto-flow / 1fr 1fr 1fr | Auto-flow rows with three columns |
100px 1fr / 200px 1fr | Defines explicit rows and columns |
Grid item properties: Control individual item placement.
Flex container 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