Grid

The rows and columns defining Hantsweb layouts

Overview

The base template in Sitecore is built upon a responsive 12-column HTML and CSS grid.

You can add one or more grids to a page to divide the page up into chunks of various sizes. This allows you to build many different page layouts, from simple two column layouts to complex layouts with multiple rows of grids.

Layout grids

Layout grids are used to create the layout of a web page. They can contain many different types of content, from text blocks to other renderings such as wells and call to action buttons.

There are two types of layout grids - numeric and proportional. Both divide the page (or row of the page if using multiple grids) into two or more columns.

Numeric grids create columns where the width of each column is measured in terms of how many of the parent template's 12 columns it covers. A two column layout grid where each column is set to be 6 of the parent columns wide divides the page (or row) into two columns of equal width. When using numeric columns, the sum of all the column widths (in one row) should equal 12.

On larger screens, numeric columns sit side by side. On smaller screens (like a mobile phone) the columns stack on top of each in a linear flow.

Proportional grids create columns where the width  of each column is measured as fraction of the entire width of the page. A three column layout grid where each column is set to one-third will create three columns of equal width.

The layout of proportional grids is maintained at all screen sizes. For example, if you choose to split your page into two columns, those columns will always remain side by side, even when viewed on a smaller screen. Proportional grids are often less useful than numeric grids because of this feature.

Layout grids supersede the old-style grids, for example the 6 - 6 grid and the 8 - 4 grid

Link grids

Link grids are used to add navigation elements to a web page. They can only contain the following types of content:

Example
diagram showing all grid options
WCMS use

Numeric layout grids and proportional layout grids are set up in the same way:

  1. In Experience Editor, select a placeholder and press the option 'Add here'
  2. Browse Building Blocks > Grids and choose one of the available layout grid options (Layout Grid 2 Column, Layout Grid 3 Column etc)
  3. A Column options box will be displayed.  For each column in your grid, a selection field will be displayed. For each of these, select the word 'column' and either a number (for a numeric grid) or a proportion (such as one-third) for a proportional grid.
  4. Select OK. You'll be returned to your page, and your new columns will be displayed, ready for you to enter your content

Layout grid - setting the column options for column1

Layout grid - setting the column options for column2

MVC.net use
Code

Small and mobile devices (below 37.5em width) pick up these rules:

.row{
	margin:0 0 1em 0;
	padding:0;
}
.columns, .column {
	padding:0 0.5em;
	width:100%;
	position: relative;
	float: left;
	display: inline;
}
.one-quarter.column				{width: 25%; }	
.one-third.column				{width: 33%; }	
.one-half.column				{width: 50%; }	
.two-thirds.column				{width: 66%; }	
.three-quarters.column			{width: 75%; }

These rules effectively linearise all columns within the document flow, but with a few simple utility classes to be used sparingly where some proportional layout is required. Above 37.5em, the full set of column dimensions are available:

    .alpha{padding-left:0em;}
    .omega{padding-right:0em;}
    .one.column			{ width: 8.25%; 	}
    .two.columns		{ width: 16.5%; 	}
    .three.columns		{ width: 24.75%;	}
    .four.columns		{ width: 33%; 		}
    .five.columns		{ width: 41.25%;	}
    .six.columns		{ width: 49.5%; 	}
    .seven.columns		{ width: 57.75%;	}
    .eight.columns		{ width: 66%; 		}
    .nine.columns		{ width: 74.25%;	}
    .ten.columns		{ width: 82.5%; 	}
    .eleven.columns		{ width: 90.75%;	}
    .twelve.columns		{ width: 99%; 		}
     
    .offset-by-one		{ margin-left: 8.25%; 	}
    .offset-by-two		{ margin-left: 16.5%; 	}
    .offset-by-three	{ margin-left: 24.75%;	}
    .offset-by-four		{ margin-left: 33%; 	}
    .offset-by-five		{ margin-left: 41.25%;	}
    .offset-by-six		{ margin-left: 49.5%; 	}
    .offset-by-seven	{ margin-left: 57.75%;	}
    .offset-by-eight	{ margin-left: 66%; 	}
    .offset-by-nine		{ margin-left: 74.25%;	}
    .offset-by-ten		{ margin-left: 82.5%; 	}
    .offset-by-eleven	{ margin-left: 90.75%;	}
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release