Grid

The rows and columns defining Hantsweb layouts

Overview
See the updated grid guidance in SharePoint (May 2022).
Example
WCMS use
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