Layout Block
The Layout block arranges content in multi-column grids. Use it to place blocks side by side for more flexible page designs.
Column presets
Section titled “Column presets”| Preset | Description |
|---|---|
| 2 columns (equal) | Two equal-width columns (default) |
| 2 columns (left wide) | 2/3 + 1/3 split |
| 2 columns (right wide) | 1/3 + 2/3 split |
| 3 columns (equal) | Three equal-width columns |
| 4 columns (equal) | Four equal-width columns |
| 2x2 grid | Two rows of two equal columns |
| 2-column masonry | Column flow for items of varying heights |
| 3-column masonry | Column flow for items of varying heights |
| Custom | Define your own column and row count (up to 9 each) with custom width ratios |
Adding content to columns
Section titled “Adding content to columns”Each column (cell) can contain multiple blocks stacked vertically. Click the add button inside a cell or drag blocks between cells.
Supported block types inside layouts
Section titled “Supported block types inside layouts”Layouts can contain: Text, Image, Video, Audio, Divider, Button, Embed, Card, and Flip Card blocks.
Accordion, Tabs, Table, Layout, Knowledge Check, Document, and Code blocks cannot be nested inside layouts.
Masonry presets
Section titled “Masonry presets”Masonry presets arrange cells as a column flow: items run top-to-bottom through two or three columns, with each item taking exactly as much vertical space as its content needs. Use masonry for image galleries, quote walls, card decks, and any content where items don’t share a common height.
Differences from the grid presets:
| Behaviour | Grid presets | Masonry presets |
|---|---|---|
| Cell positioning | Fixed row/column slots | Column flow in source order |
| Adding cells | Fixed count per preset | Add or remove items freely |
| Item heights | Share a row height | Each item uses its natural height |
Tips:
- Starter layouts begin with three items per column (6 items for 2-column, 9 for 3-column) so the flow is visible immediately.
- Each cell keeps its assigned column stable when you expand or collapse a nested block, so the layout doesn’t shuffle as you edit.
- Authors control balance by reordering cells. Heavier cells belong higher in source order to keep columns from stretching unevenly.
Gap spacing
Section titled “Gap spacing”Control the gap between columns:
| Option | Size |
|---|---|
| None | No gap |
| Small | 0.5rem |
| Medium | 1rem (default) |
| Large | 1.5rem |
Changing the preset
Section titled “Changing the preset”You can change the layout preset after adding content. When you switch presets, existing content is moved to the first cell of the new layout so nothing is lost. Switching between grid and masonry preserves your authored blocks; masonry-to-grid flattens them into the first cell the same way other grid-to-grid changes do.
Mobile behaviour
Section titled “Mobile behaviour”Layout columns stack vertically on small screens so content remains readable on phones and tablets. Masonry layouts stack into a single column on narrow screens, keeping items in source order.