Grid Widgets

If this seems a bit complicated, don’t worry, the grouping of columns is already done for you within Sitefinity using the different Grid widgets you’ll find in the Layout view of the Page editor. All you have to do is drag them onto the page – no math needed!

Grid widgets are like the bones of your page. They give it a structure, and provide a container for Content widgets to live inside.

Here’s an example of what some of these Grid widgets look like after dragging them into the main content area:

As you’ll see, we’ve included all the common combinations you might need, but you actually have a lot more options. To create the best layout for your page, you could further divide a span of columns by dropping another Grid widget into it.

For example, there isn’t a Grid widget that gives you 5 columns, but you can create 5 columns using combinations of Grid widgets nested inside of other Grid widgets.

Here is one way to create 5 columns:

First, drop a “3+9” Grid widget into the content area to create two columns – a narrow “Column 1” (spanning 3) and a wide “Column 2” (spanning 9):

Then, drop a “3+3+3+3” Grid widget into “Column 2” to divide it into 4 sections:

Of course, this is only one way to create 5 columns. There are many, many more possibilities.

Feel free to create an un-published page to experiment with dividing and rearranging columns.