Thompson Rivers University
Thompson Rivers University

Grid System

The Grid System

The grid system has two elements: rows and columns.

Rows contain columns. Columns determine the width of your content.

Assign columns a number to give them a size. (one, two, three... twelve)

The grid can contain a maximum of 12 columns. The width of each column is not a fixed size, but a percentage of its parent container.

Columns within a row cannot add up to more than twelve. But they can add up to less than twelve.

Twelve is the equivalent to 100%.


<div class="row">
<div class="large-3 columns">
<div class="panel">
<p>Content A (two)</p>
</div>
</div>
<div class="large-3 columns">
<div class="panel">
<p>Content B (two)</p>
</div>
</div>
</div>

Content A (large-3 columns)

Content B (large-3 columns)


The last column is always floated right. To override this, add class="end" to the column

Content A (large-3 columns)

Content B (large-3 columns end)


Column sizes and Device sizes

Column sizes can be added to almost any element, but it is recommended to avoid this and place elements inside rows/columns instead. Elements will keep these proportions as they resize.

This is a panel (large-5 columns)

This is a table (large-8 columns)
Month Savings Expenses Growth
Lorem ipsum $400 $100 5%
Lorem ipsum $400 $100 5%

In order to target a column width on a particular screen size, add extra classes with a number for that screen size.

For example:

This is 6 columns wide on a large screen, 8 columns wide on a medium (tablet) screen, and 10 columns wide on a small screen (phone). (large-6 medium-8 small-10 columns)

Important: If you do not specify a size for smaller screen sizes, they will automatically be 12 columns wide on small devices. Medium-sized devices will inherit the large size set.


<div class="panel large-6 medium-8 small-10 columns">
<p>This is 6 columns wide on a large screen, 8 columns wide on a medium (tablet) screen, and 10 columns wide on a small screen (phone). (large-6 medium-8 small-10 columns)</p>
</div>

Nesting

Columns can contain additional rows, like adding tables inside of a TD. This allows for more complex and refined layouts. In most cases you should be able to get your desired layout using un-nested columns.

A (large-12)

B (large-4)

C (large-4)

E (large-4)

F (large-4)

G (large-4)

D (large-4)


Elements will use the percentage of their parent element. If the parent element has a width set, the child will use a percentage of that number. Foundation calls this 'Nesting'.

Content A (large-6)

Content B (large-6)

Content C (large-3)

Content D (large-3)


OffSets

Offsets allow you to create space between columns. Offsets count in your column math. Offsets + columns cannot exceed twelve.

Content A (large-3)

Content B (large-3 large-offset-1)

Content C (large-3 large-offset-1)


<div class="row">
<div class="large-3 columns">
<div class="panel">
<p>Content A (large-3)</p>
</div>
</div>
<div class="large-3 columns large-offset-1">
<div class="panel">
<p>Content B (large-3 large-offset-1)</p>
</div>
</div>
<div class="large-3 columns large-offset-1 end">
<div class="panel">
<p>Content C (large-3 large-offset-1)</p>
</div>
</div>
</div>

Centered Columns

You can center single columns within a row. But you can only do this if there is one column in the row. Note that this does not center the content. By applying "small-centered", it will centre the column on small devices (mobile phones) and up. Medium will centre the column on tablets and up, Large will only be centered on desktops and large screens.

You can uncentre a column on a particular screen size with "large-uncentered", "medium-uncentered", etc.

Content A (large-2 large-centered)

Content B (large-5 medium-centered)

Content C (large-9 small-centered large-uncentered)


<div class="row">
<div class="large-2 columns small-centered">
<div class="panel">
<p>Content A (large-2 small-centered)</p>
</div>
</div>
</div>
<div class="row">
<div class="large-5 columns small-centered">
<div class="panel">
<p>Content B (large-5 small-centered)</p>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns small-centered">
<div class="panel">
<p>Content C (large-9 small-centered large-uncentered)</p>
</div>
</div>
</div>

Visibility

Foundation supports a large number of classes for hiding or showing content on different screen sizes.

We generally use two of these options:

  • show-for-small
  • hide-for-small

Always display this panel

Hide this panel on mobile

Only show this panel on mobile


<div class="row">
<div class="large-4 columns">
<div class="panel">
<p>Always display this panel</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel hide-for-small">
<p>Hide this panel on mobile</p>
</div>
</div>
<div class="large-4 columns">
<div class="panel callout show-for-small">
<p>Only show this panel on mobile</p>
</div>
</div>
</div>

Floating Elements

You can use left or right to float elements.


Panel floating left

In the Middle Ages, those who attacked castles used trebuchets, military engines capable of firing missiles with frightening force. In this section, view an actual trebuchet NOVA built, and construct and fire one of your own online. Also, find out what other weapons were used and what daily life was like in a medieval castle.


Panel floating right

In the Middle Ages, those who attacked castles used trebuchets, military engines capable of firing missiles with frightening force. In this section, view an actual trebuchet NOVA built, and construct and fire one of your own online. Also, find out what other weapons were used and what daily life was like in a medieval castle.


Block Grid

Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of 5 images or paragraphs that need to stay evenly spaced no matter the screen size, use block grid.

Here's how

  • add a class to tell foundation how many columns you want ("large-block-grid-4")
  • add another class to tell foundation how many columns you want for tabletes ("medium-block-grid-3")
  • add another class to tell foundation how many columns you want for mobile ("small-block-grid-2")
  • Content A

  • Content B

  • Content C

  • Content D

  • Content E

  • Content F


<ul class="large-block-grid-4 medium-block-grid-3 small-block-grid-2">
<li><div class="panel"><p>Content A</p></div></li>
<li><div class="panel callout"><p>Content B</p></div></li>
<li><div class="panel"><p>Content C</p></div></li>
<li><div class="panel callout"><p>Content D</p></div></li>
<li><div class="panel"><p>Content E</p></div></li>
<li><div class="panel callout"><p>Content F</p></div></li>
</ul>