Grid and Layout

Structure

The grid system we are using is built off of zurb's foundation.

It is a responsive grid which is easy to use. Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a columns class within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes as shown in the example below.

The small class is the number of columns that will display on mobile devices with screen resolutions up to 640px wide

The medium class is the number of columns that will display on desktops and devices with screen resolutions up to 1024px wide

The large class is the number of columns that will display on desktops with resolutions higher than 1024px.

Getting Started

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. The number of columns should add up to 12, unless you are using a centered grid.

24
4
64
full3
full6
full3
62
68
full2
3
9
full4
full8
65
67
full6
full6
<div class="row">
  <div class="small-2 large-4 columns"><span class="hide-for-large">2</span><span class="show-for-large">4</span></div>
  <div class="small-4 large-4 columns">4</div>
  <div class="small-6 large-4 columns"><span class="hide-for-large">6</span><span class="show-for-large">4</span></div>
</div>
<div class="row">
  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
</div>
<div class="row">
  <div class="small-6 large-2 columns"><span class="hide-for-large">6</span><span class="show-for-large">2</span></div>
  <div class="small-6 large-8 columns"><span class="hide-for-large">6</span><span class="show-for-large">8</span></div>
  <div class="small-12 large-2 columns"><span class="hide-for-large">full</span><span class="show-for-large">2</span></div>
</div>
<div class="row">
  <div class="small-3 columns">3</div>
  <div class="small-9 columns">9</div>
</div>
<div class="row">
  <div class="large-4 columns"><span class="hide-for-large">full</span><span class="show-for-large">4</span></div>
  <div class="large-8 columns"><span class="hide-for-large">full</span><span class="show-for-large">8</span></div>
</div>
<div class="row">
  <div class="small-6 large-5 columns"><span class="hide-for-large">6</span><span class="show-for-large">5</span></div>
  <div class="small-6 large-7 columns"><span class="hide-for-large">6</span><span class="show-for-large">7</span></div>
</div>
<div class="row">
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
</div>
.row
  .small-2.large-4.columns
    span.hide-for-large 2
    span.show-for-large 4
  .small-4.large-4.columns 4
  .small-6.large-4.columns
    span.hide-for-large 6
    span.show-for-large 4
.row
  .large-3.columns
    span.hide-for-large full
    span.show-for-large 3
  .large-6.columns
    span.hide-for-large full
    span.show-for-large 6
  .large-3.columns
    span.hide-for-large full
    span.show-for-large 3
.row
  .small-6.large-2.columns
    span.hide-for-large 6
    span.show-for-large 2
  .small-6.large-8.columns
    span.hide-for-large 6
    span.show-for-large 8
  .small-12.large-2.columns
    span.hide-for-large full
    span.show-for-large 2
.row
  .small-3.columns 3
  .small-9.columns 9
.row
  .large-4.columns
    span.hide-for-large full
    span.show-for-large 4
  .large-8.columns
    span.hide-for-large full
    span.show-for-large 8
.row
  .small-6.large-5.columns
    span.hide-for-large 6
    span.show-for-large 5
  .small-6.large-7.columns
    span.hide-for-large 6
    span.show-for-large 7
.row
  .large-6.columns
    span.hide-for-large full
    span.show-for-large 6
  .large-6.columns
    span.hide-for-large full
    span.show-for-large 6
There is quite a bit of css for grids, and should not be modified.  Please make override changes in project specific css
There is quite a bit of scss for grids, and should not be modified.  Please make override changes in project specific css

Small Grids

Small grids expand to large screens easier than large grids cram into small screens.

2 columns
10 columns
3 columns
9 columns
<div class="row">
    <div class="small-2 columns">2 columns</div>
    <div class="small-10 columns">10 columns</div>
  </div>
  <div class="row">
    <div class="small-3 columns">3 columns</div>
    <div class="small-9 columns">9 columns</div>
  </div>
.row
  .small-2.columns 2 columns
  .small-10.columns 10 columns
.row
  .small-3.columns 3 columns
  .small-9.columns 9 columns

Nested Grids

Grids can be nested indefinitely, if required.

8
8 Nested
8 Nested Again
4
4
4
<div class="row display">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>
.row.display
  .small-8.columns
    | 8
    .row
      .small-8.columns
        | 8 Nested
        .row
          .small-8.columns 8 Nested Again
          .small-4.columns 4
      .small-4.columns 4
  .small-4.columns 4
<div class="example">
    <span>CSS here...</span>
 </div>
<div class="example">
    <span>SCSS here...</span>
 </div>

Offsets

The grid can blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

1
11
1
10, offset 1
1
9, offset 2
1
8, offset 3
<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
.row.display
  .large-1.columns 1
  .large-11.columns 11
.row.display
  .large-1.columns 1
  .large-10.large-offset-1.columns 10, offset 1
.row.display
  .large-1.columns 1
  .large-9.large-offset-2.columns 9, offset 2
.row.display
  .large-1.columns 1
  .large-8.large-offset-3.columns 8, offset 3

Centered Columns

Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.

3 centered
6 centered, large
9 centered small
11 centered
<div class="row display">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row display">
  <div class="small-6 large-centered columns">6 centered, large</div>
</div>
<div class="row display">
  <div class="small-9 small-centered large-uncentered columns">9 centered small</div>
</div>
<div class="row display">
  <div class="small-11 small-centered columns">11 centered</div>
</div>
.row.display
  .small-3.small-centered.columns 3 centered
.row.display
  .small-6.large-centered.columns 6 centered, large
.row.display
  .small-9.small-centered.large-uncentered.columns 9 centered small
.row.display
  .small-11.small-centered.columns 11 centered

Incomplete Rows

In order to work around browsers' different rounding behaviors, foundation floats the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

3
3
3
3
3
3 end
<div class="row display-end">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
</div>
<div class="row display-end">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>
.row.display-end
  .medium-3.columns 3
  .medium-3.columns 3
  .medium-3.columns 3
.row.display-end
  .medium-3.columns 3
  .medium-3.columns 3
  .medium-3.columns.end 3 end