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