Block Grid
The Block Grid is where you build the content of a page in v17. You add blocks (Text, Image, Pod, Tabs and more) onto a 12-column grid, set how wide each block should be, and arrange them into rows and columns to create your layout. See Umbraco's documention on Block Grid for more infomation on how they work.
In v13 you added widgets into fixed column structures and each widget carried its own Column Width setting. In v17 there is a single Block Grid: you place blocks directly, drag to set each block's width, and sit blocks beside each other to make columns. Layout concepts that used to be widget settings — sidebars, column widths, sub-grids — are now handled by Sections and column spans.
How blocks are grouped
When you add a block, the picker groups them into three categories:
| Group | Purpose |
|---|---|
| Blocks | The standard content blocks you place inside a row or a Section (Text, Image, Pod, Button, Accordion, etc.). |
| Full Width | Layout blocks that always span the full width of the page and can contain other blocks — Section, Hero, Section Navigation and People. |
| Sub-Blocks | Blocks that only exist inside another block, such as a Tab inside a Tabs block. |
Shared behaviour
Most blocks share the same width control and base settings. To avoid repeating them on every page, they're documented once on the Common settings page:
- Column span — how to set a block's width and build columns.
- Block settings — Alias, Anchor Id, Custom CSS Classes and Palette.
Each block page below lists only the content and settings unique to that block.
🖼️ Image suggestion: Screenshot of the block picker open, showing the Blocks / Full Width / Sub-Blocks groups.