Create GRID page
This friendly guide introduces the uSkinned Grid Page, a powerful tool for creating complex layouts without any code. It helps beginners grasp the difference between a standard page and a flexible "Grid" layout where you can place content side-by-side. With this foundation, you can create professional multi-column layouts that look great on any device.
Designing Your Layout
The uSkinned Grid system works like a flexible canvas. Instead of content stacking in a single vertical line, the Grid allows you to define rows and columns. This spot saves you time by letting you drag and drop "Lego-block" components into specific areas of the screen—perfect for features, galleries, or "About Us" sections where you want text and images to sit next to each other.
Understanding the Grid Structure
Before jumping into adding content, imagine your page as a set of horizontal rows. Within each row, you can choose how many "columns" you want (e.g., two halves or three thirds). No deep tech knowledge needed—just select a layout and start filling the boxes. Start by creating a Grid Page and clicking the "Add Content" button to see the layout options available in the visual editor.
Play
Watch: Creating GRID Layouts in Umbraco 17+
This short video walks you through selecting a Grid layout and placing your first components into columns. You'll learn how to switch from a single-column view to a multi-column design in just two clicks.
Other Related Tutorials
-
[Tutorial 1] uSkinned: How to Add or Edit a Page
-
[Tutorial 2] uSkinned: Modular Content Creation Guide
-
[Tutorial 3] Umbraco Learning Base: Video Tutorials
-
[Tutorial 4] Official Umbraco 17 Documentation
Preparing the Grid Page
-
Right-click your parent node (e.g., Home) and select Create.
-
Choose Grid Page from the list of available page types.
-
Name your page at the top of the screen.
-
Click Add Content in the main content area to choose your first row layout (e.g., "50/50" for two columns).
-
Click 'Save and Publish' to see your structural layout live.
Pro-Tip: If a row looks too crowded on mobile, uSkinned automatically stacks the columns for you! You can check this by using the "Mobile View" icon at the top of your Umbraco Backoffice before you hit publish.
Where Next?
Now that you've successfully learned how to "Create a GRID Page" and populated it with beautiful blocks, what’s the next step in perfecting your layout?
The creative process usually involves a bit of trial and error. Perhaps that "Call to Action" works better at the top of the page, or maybe your "Services" subpages need to be rearranged in the navigation menu.
Your next logical step is learning how to "Change Order"—both for the blocks within your grid and the pages in your site tree. Let’s make sure everything sits exactly where it belongs!
Articles in this section