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.

• Related Articles

• Creating Columns Using Grid Widgets

  You will most likely need a page that has content separated into columns. You don’t have to create the column layout on the page before adding Content widgets, but it does help if you already have a design in mind.    Here is an example of columns ...

• Page Layout & Column Concept

  The MPI Global and Chapter website templates within the Sitefinity CMS use a coding tool kit, or framework, called Bootstrap.  Bootstrap is one of the most popular frameworks for developing mobile-friendly, or responsive, websites. A responsive ...

• Creating a New Page

  1.     On the main menu at the top of the Dashboard, click Pages. You are now in the Pages section of the admin area.   2.     Find the section (parent page) under which you’d like to add a new page, then click on Actions. This menu will drop down:   ...

• Creating and Building Forms

  Create the Form In the Title input field, enter the name of the form. Do not change the Name used in code (for developers) Do not change anything under Advanced.  “MVC only” is selected by default. This is the option that must always be selected.   ...

• Form Widgets

  Textbox Use this widget to give the user the opportunity to enter free text no longer than a line, such as street address, e-mail, etc. After you drag the Textbox widget in your form, click the Edit button in the upper-right corner of the widget. ...