In this tutorial, you will learn how to allow your content editors to create a flexible layout using the Umbraco grid layout. 

If you're new to Umbraco and you don't fully 'get' why flexible layouts are super cool, or what the grid layout is, then I suggest you read this article first.  For the rest of you, let's get on with it.

Creating A Document Type To Add The Grid Layout

First, log into your Umbraco backend, then go to 'Settings' -> 'Document Types'.  To create a user-editable content area you will need to add a 'grid editor; to your page.  To do this, go to your document-type and select -> 'Add Property'

From this list, add a name like 'editable area and then select 'add editor'.

From here select 'Grid layout'

Boom... that's the hard part done!  As you are just getting familiar with the grid layout, I suggest that you just go with the default options, click save on the properties page and get a feel for what you can do, instead of focusing on how you can customize it.


Now you have a grid editor property on your document-type.  Save it.

Using the Grid Layout

To use the newly created grid layout, go into the content tree, create a new page using the document-type you created in the step above. 

In the Umbraco editor, you should be able to see the grid layout property ready to rumble, as you can see below:

After you click the 'Add Content' button, you can select which block you want to add.  Out-of-the-box, you can create a video, a headline, images, quotes, text, and even macros.

After you add a block to the grid editor, you are then free to either publish the page, add more blocks onto the page, or re-arrange the existing blocks however you see fit. For long-time Umbraco users, you will see how the grid editor gives you a lot more flexibility.  When you build a new project for a client, I suggest you go with this type of approach, as it gives content editors a lot more power.