Layout Elements: Grid, Flex, Columns
Site Designer gives you three distinct layout systems — CSS Grid, Flexbox, and multi-column — each suited to different problems. Choosing the right one from the start saves significant rework later.
When to use which layout system
| System | Best for | Think of it as |
|---|---|---|
| CSS Grid | Two-dimensional layouts (rows AND columns together) | A spreadsheet — place items in named cells |
| Flexbox | One-dimensional alignment (a row OR a column) | A single track — items flow in line |
| Columns | Newspaper-style text that flows across columns | Flowing text with no precise item placement |
The short answer: use Grid for page structure, Flex for component alignment, Columns for multi-column text articles.
Grid element
The Grid element creates a container with display: grid and opens the Master Grid editor — Site Designer’s visual interface for defining rows, columns, and areas.
The Master Grid editor
When you select a Grid element, the Master Grid editor appears in the Style pane. From here you can:
- Add and remove columns by clicking the
+button at the top of the grid preview - Add and remove rows by clicking the
+button on the left side - Set column and row sizes using any CSS unit (
fr,px,%,auto,minmax()) - Name grid areas by typing into the cells — this generates a
grid-template-areasstring - Drag cell borders to resize tracks visually
Placing items in the grid
Each direct child of a Grid element can be placed explicitly by assigning it a grid area name. Select any child element and open the Content pane → Grid Placement to set its grid-area, grid-column, and grid-row values.
Unplaced items fall into the next available cell following the browser’s auto-placement algorithm.
Responsive grid layouts
Select the Grid element, click the responsive breakpoint selector in the toolbar, and resize the grid for each breakpoint in the Master Grid editor. Site Designer generates the appropriate @media rules automatically.
Flex container element
The Flex container element creates a <div> with display: flex. Unlike the Grid element, it does not open a separate editor — Flexbox controls appear directly in the Style pane when a Flex container is selected.
Flexbox controls in the Style pane
| Property | Controls |
|---|---|
| Direction | row (horizontal) or column (vertical) |
| Wrap | nowrap (all items in one line) or wrap (items wrap to next line) |
| Justify content | How items are spaced along the main axis (start, center, space-between, etc.) |
| Align items | How items align on the cross axis (stretch, center, baseline, etc.) |
| Gap | Space between items (row-gap and column-gap) |
Controlling flex children
Select any direct child of a Flex container to access its individual flex properties: flex-grow, flex-shrink, flex-basis, and align-self. A common pattern is flex: 1 to make all children share available space equally.
Nesting Flex inside Grid
A very common — and recommended — pattern is to use Grid for the macro page structure and Flex for the micro alignment within each grid cell. For example, a grid places a card component in a cell, and Flex inside the card aligns the title, body, and button vertically with the button pushed to the bottom.
Columns element
The Columns element creates a container using CSS columns (also called CSS Multi-Column Layout). Text and child elements inside it flow automatically from the bottom of one column to the top of the next — like a newspaper or magazine.
Columns controls
Select a Columns element and use the Style pane:
- Column count: The exact number of columns (
column-count) - Column width: A minimum column width — the browser creates as many columns as fit (
column-width) - Column gap: The space between columns (
column-gap) - Column rule: An optional decorative line between columns (
column-rule)
Use column-count when you want a fixed number of columns regardless of container width. Use column-width for a responsive approach where the number of columns adjusts to fit.
Nesting layout systems
Layout elements can be nested freely:
- A Grid cell can contain a Flex container for alignment
- A Flex item can contain a Grid for a card’s internal layout
- Columns can contain Containers (but placing precise items in specific columns requires Grid)
There is no performance penalty for nesting layout systems. Use the most expressive tool at each level of your component hierarchy.
