This guide introduces the Block Grid Editor, the most powerful layout tool in Umbraco 17+. It helps you understand that a page isn't just a single column of text, but a collection of "blocks" that can be arranged, resized, and nested. You’ll gain the basics of "modular design," allowing you to build complex layouts without writing a single line of code.
Layouts vs. Content
In Umbraco 17+, a Grid Page is built using two distinct types of blocks:
-
Layout Blocks: These are the "skeletons." They define the structure, such as a 12-column full-width row, a 50/50 split, or a complex sidebar layout.
-
Content Blocks: These are the "meat." These are the actual items you place inside the layouts—like Text, Images, Videos, or uSkinned Banners. This foundation gives you the freedom to change the structure of a page (moving from two columns to three) without having to re-create your content.
Responsive by Default
One of the best features of the Block Grid in version 17+ is that it is built for a mobile-first world. When you place blocks in a 12-column grid, Umbraco automatically understands how they should "stack" on a smartphone. You don't have to worry about your images being too wide or your text overlapping; the Grid handles the heavy lifting so your site looks professional on every device.
Play
Watch: Deep Dive into the Umbraco Block Grid Editor
This video explains the philosophy of the Block Grid and shows the real-time "Live Preview" feature which lets you see exactly how your layout looks as you build it.
Other Related Tutorials
-
[Tutorial] Block Grid Editor Overview (Official Docs)
-
[Tutorial] Creating Your First Block Grid Layout
-
[Tutorial] Copying and Pasting Blocks
-
[Tutorial] uSkinned: Building with Modular Components
Key Features of a GRID Page
-
Drag-and-Drop: Easily move content between different columns or rows.
-
Live Preview: See a visual representation of your components directly in the Backoffice.
-
Column Spanning: Resize a block simply by dragging its edge to cover more or less of the 12-column grid.
-
Areas: Create "Blocks within Blocks" for advanced designs like a "Features" row containing multiple individual "Feature" icons.
Pro-Tip:
Think of the Block Grid as a 12-column system. If you want two equal-sized blocks side-by-side, set each block to span 6 columns. If you want three blocks, set them to 4 columns each ($3 \times 4 = 12$).