You are here

Responsive Grids

Responsive grids can be used to display content such as publications and meet our students pages in a 12-column fluid layout. Grids will collapse on smaller browser windows and mobile devices

<div class="row">
  <div class="medium-3 columns">ONE (width: 3 columns)</div>
  <div class="medium-9 columns">TWO (width: 9 columns)</div>
</div>
<div class="row">
  <div class="medium-3 columns">THREE (width: 3 columns)</div>
  <div class="medium-9 columns">FOUR (width: 9 columns)</div>
</div>
<div class="row">
  <div class="medium-3 columns">FIVE (width: 3 columns)</div>
  <div class="medium-9 columns">SIX (width: 9 columns)</div>
</div>

The columns of each row must total 12 units. Typically, a 3:9 or 2:10 ratio works well for image/text grids. To add images, replace the text in the example markup using the Add Media tool. An expanded version of this example markup results in the following grid:

ONE (width: 3 columns)
TWO (width: 9 columns)
THREE (width: 3 columns)
FOUR (width: 9 columns)
FIVE (width: 3 columns)
SIX (width: 9 columns)