Grid system

This page demonstrates grid options when there is a left menu. Alternatively view the: No left menu grid options

Grid overview

Grids have been around for a long time in print publishing, and have now moved to the Web. A grid is an invisible CSS wireframe used to achieve visual cohesion. It's like a lattice that divides space into sections used to hold content such as headings, text, lists, images and so on.

No left menu

If a pages has no left menu, there are two grid systems that can be used within the page. An 8 column is the default and an optional 12 column can be called in at any location on the page by opening a <div class="grid-12">.

With a left menu

There are two Grid systems that can be used within a page that has a left menu. An 8-column system is the default, however because the left menu occupies the first 2 columns, the content area can occupy only the remaining six columns. An optional 12-column is available at any point on the page by simply opening a <div class="grid-12"> within the content area.

Why is 8 columns the default?

Most complex sites have a left menu. The left menu takes up a certain number of grid cells, leaving the remaining space for the content area. The default design of this Grid system allows for the left menu to be two columns wide while the content area is six.

The content area, with it's six columns, nicely divides into two and three equal columns. As demonstrated below, a 12 column Grid system that has a left menu, cannot divide the content as nicely, as the remaing cells cannot be divided by two, which is a basic design requirement. A 16-column Grid system also has problems, as the remaining space cannot be divided into equal thirds. In fact, the only Grid system that solved all design requirements was a 24-column Grid system, but that seems overcomplicated. Furthermore, text should not be put in the tinest grid cells, like a span-1, and should only be used for indenting purposes or to hold an image so having 24 tiny grid cells was potentially going against accessibility requirements. The WCAG 2.0 requires text to increase up to 200% without breaking the layout and text inside a tiny box cannot effectively do this. Refer to: WCAG 2.0: Success Criterion 1.4.4

Both can divide the content area into thirds.

Both can create a right menu the same width as the left menu.

Only one can divide the content area in half.

12 column option

A grid-12 living inside of the the default 8 column grid design.

For complex or alternate layouts, you can call in a grid-12 within the content area. Although the default Grid system will likely meet the majority of all needs, this alternate grid version is available and can be easily activated.

Grid structure

When there is a left menu, the Grid system offers two grid layouts for the content area: the six column layout and the twelve column layout.

Grid building blocks

In the same way that a typical browser setting is 1024x768 (not 1025x775), the dimensions below do not always use convenient values as they use the exact value needed for the system to work. A single grid cell has a margin-left and margin-right of 10px. This is known as the gutter.

Furthermore, grid cells have a default margin-top of 0px and a margin-bottom of 20px. This can be increased or decreased by adding the margin proximity CSS.

Six grid columns

Twelve grid columns

Grid rows

To maintain the integrity of each row, you must place a <div class="clear"></div> at the end of each row. This is because grid cells have a float:left property. The clear prevents the next row of grid cells from trying to float up and fill any gaps in the previous row.

<div class="span-2">
    <p>A</p>
</div>
<div class="span-2">
    <p>B</p>
</div>
<div class="clear"></div>
<div class="span-2">
    <p>C</p>
</div>
<div class="span-2">
    <p>D</p>
</div>
<div class="clear"></div>

<div class="span-2">
    <p>A</p>
</div>
<div class="clear"></div>
<div class="span-2">
    <p>B</p>
</div>
<div class="clear"></div>
<div class="span-2">
    <p>C</p>
</div>
<div class="clear"></div>
<div class="span-2">
    <p>D</p>
</div>
<div class="clear"></div>
	

Grid dimensions

As per gridsystemgenerator.com (external link) the grid cell dimensions for the responsive design are as follows:

Grid layout

There are 32 base layout options, ranging from a single full width (span-6) to a six column layout (six span-1's). Below are the layout options:

<div class="span-6">
	<p>Text here</p>
</div>
<div class="clear"></div>

<div class="span-5">
  <p>Text here</p>
</div>
<div class="span-1">
  <p>Text here</p>
</div>
<div class="clear"></div>

Seven to twelve columns

For complex or alternate layouts, you can call in a grid 12 within the content area. Although the default Grid system will likely meet the majority of your needs, this alternate grid version is available and can be easily activated. The grid 12 can be called in anywhere on the page by opening a <div class="grid-12"> container:

<div class="grid-12">
   <div class="span-6">
      <p>Text here</p>
   </div>
   <div class="span-6">
      <p>Text here</p>
   </div>
   <div class="clear"></div>
</div>

The width of the grid cells are smaller within the <div class="grid-12"> container. A <div class="span-1"> in the grid 12 is much smaller than in the default Grid system. This resizing happens automatically when cells are inside the <div class="grid-12"> container.

Offset grids cells (version 3.1+)

Grid cells can be offset using offset-1 to offset-5:

Grid cells inside a grid-12 can also be offset using offset-1 to offset-11:

<div class="span-2 offset-2">
  <p>Text here</p>
</div>

Grid parents and children CSS

Within a grid cell, you can place other grids, thereby creating a grid parent that contains grid children (like a table inside a table). Grids are typically rows of content, read from left to right. However, there are times when you need to cluster and group content in a customized way. Grid parents allow you to do this.

Placing grids inside grids allows you to stack content and create unique layouts, while adhering to the structure and rigour of a Grid system. Additionally, JAWS (software for visually impaired staff) can read grouped content within the grid parent before moving to the next grid cell, even when you vertically stack this content. This ensures both visual and visually-impaired users have the same experience.

row-start and row-end CSS

In each row, you need to remove the left hand gutter from the first child and the right hand gutter from the last grid child so it fits into the available space. Apply the row-start to the first child in the row and then row-end CSS to the last child in a given row to achieve this. Refer to the example below.

<div class="span-4 align-center background-light">
	<p class="font-large">Parent cell</p>
    <div class="span-1 row-start background-dark">
    	<p>row-start child</p>
    </div>
    <div class="span-2 background-accent">
    	<p>child</p>
    </div>
    <div class="span-1 row-end background-dark">
    	<p>row-end child</p>
    </div>
</div>

If you forget to use the row-start and row-end class

If you allow the first and last child per row to retain their margins, they can't fit into the available space. Therefore, the final cells gets bumped and floats to the next available space below.

<div class="span-4 align-center background-light">
	<p class="font-large">Parent cell</p>
    <div class="span-1 background-dark">
    	<p>child</p>
    </div>
    <div class="span-2 background-accent">
    	<p>child</p>
    </div>
    <div class="span-1 background-dark">
    	<p>child</p>
    </div>
</div>

When the parent and the child are the same width

You can have children with the same width as the parent cell. If a child cell is as wide as the parent cell, then you do not need to apply the row-start and row-end classes, as the CSS automatically removes the margin left and right from the child.

<div class="span-4 align-center background-light">
	<p class="font-large">Parent cell</p>
    <div class="span-4 background-dark">
    	<p>child</p>
    </div>
    <div class="span-4 background-accent">
    	<p>child</p>
    </div>
    <div class="span-4 background-dark">
    	<p>child</p>
    </div>
</div>

Equal height columns

Historically, you used tables for layout, and it was easy to create columns of equal height. In every row, the table data cells always assumed the height of the tallest cell in that row. CSS grid cells create similar rows of content, but because they are not associated with each other, they do not apply borders and background colour fills in the same way. Without JavaScript, there is no way for the browser to know what the tallest grid cell per row cell is. Therefore, a CSS / JavaScript solution is necessary to achieve this same effect.

By using equalize on the grid parent, its row of grid children automatically assume the height of the tallest child.

<div class="span-1 background-light">
	<p>This is placeholder text. This is placeholder text. </p>
</div>
<div class="span-3 background-light">
	<p>This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.</p>
</div>
<div class="clear"></div>
<div class="span-2 background-light">
	<p>This is placeholder text.</p>
</div>
<div class="span-2 background-light">
    <p>This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.</p>
</div>
<div class="clear"></div>

<div class="span-4 equalize">
    <div class="span-1 background-light row-start">
        <p>This is placeholder text. This is placeholder text. </p>
    </div>
    <div class="span-3 background-light row-end">
        <p>This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.</p>
    </div>
</div>
<div class="clear"></div>
<div class="span-4 equalize">
    <div class="span-2 background-light row-start">
        <p>This is placeholder text.</p>
    </div>
    <div class="span-2 background-light row-end">
        <p>This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.</p>
    </div>
</div>
<div class="clear"></div>