In today's tutorial, you will learn how to add a flexible grid layout property to your Umbraco V7 pages. This property will give your content editors the ability to build dynamic pages, electing from various blocks and deciding how they want a page to be laid out If you're new to Umbraco and you don't fully 'get' what or why flexible layouts are super cool, I suggest you read this article first. For the rest of you, let's get on with it.

Create A Document-Type To Add The Grid Layout

First, log into your Umbraco backend, and go to 'Settings' ➡ 'Document Types'. To add a new editable area onto a document type, find the grid editor property and select 'Add Property':

Umbraco grid layout 1

From the property editor screen, give the property a name. This can be whatever makes should make sense for the content editor when they come to use the document type within the CMS, for example 'editable area` and then select 'add editor'.

Umbraco grid layout 2

From here select 'Grid layout'. You will get presented with a number of Grid Layout specific properties. As you are just getting familiar with the grid layout, I suggest that you just go with the default options the first time:

Umbraco grid layout 3

Click save on the properties dialogue

Umbraco grid layout 4 

Now you have a grid editor property added to your document type., click the `save button on your document-type as well!

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 used 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:

Umbraco grid layout 5

After you click the 'Add Content' button, you can select which block you want to add.  Out-of-the-box, you can add a video, a headline, an image block, a quote block, some text, and a macro.

Umbraco grid layout 6

After a block within has been added to the grid you can either publish the page, add more blocks onto the page, or re-arrange the existing blocks. 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. Happy Coding 🤘