Arrange GRID Page

This guide explains how to manipulate the blocks you’ve created to refine your layout. It helps beginners understand that a page design isn't permanent—you can easily drag a "Testimonial" above a "Gallery" or turn a full-width banner into a side-by-side feature. You’ll gain the basics of visual hierarchy by moving and scaling blocks on your digital canvas.

Drag-and-Drop Movement

In Umbraco 17+, every block in the grid is movable. When you hover over a block, a drag handle (usually an icon with six dots or arrows) appears. By clicking and holding this handle, you can pick up the block and slide it into a new position. The grid will show a blue or green highlight to indicate where the block will land, making it simple to reorder your story in seconds.

Scaling and Resizing

One of the most powerful features of the Umbraco 17+ Grid is the ability to Scale. If a block is configured to be flexible, you can grab the edge of the block in the editor and drag it to span more or less columns. Want your "Contact Form" to take up only 1/3 of the row instead of the whole width? Just drag the edge until it snaps to the 4-column mark.

[Image showing a block being dragged from one row to another with a highlighted drop zone]

Watch: Rearranging and Scaling Blocks in Umbraco 17+

Blank placeholder image

This video demonstrates how to use the drag-and-drop handles and how to move blocks between different "Areas" or columns within a single section.

Other Related Tutorials

Action Steps to Arrange Your Grid

  1. Enter Edit Mode: Open your Grid page in the Visual Editor.

  2. Move a Block: Hover over the block you want to move. Click and hold the drag handle and move it to a new location.

  3. Resize a Block: If the block is scalable, click and drag the bottom-right corner to change how many columns it spans (e.g., from 12 columns down to 6).

  4. Move Between Sections: You can drag a block out of a "2-column row" and drop it into a "Full Width" row further down the page.

  5. Save and Publish: Once your layout looks balanced, click Save and Publish to update the live site.

 

Pro-Tip: If you are trying to move a block but the grid turns red, it means that specific block isn't "allowed" in that area. For example, some sidebars are restricted to only allow "Link" blocks and won't accept a "Big Hero Banner."

Where Next?

Now that your page is perfectly arranged, why not expand your library of building blocks? Your next step is to explore "Installing GRID Components"—the best way to learn how to integrate new, modular features into your bespoke layouts.