Grid Columns Documentation

Step 1: Add grid-columns container

To setup a set of grid-column, you will need to declare a containing element. You do this by adding the class grid-columns.

<div class="grid-columns">
  …
</div>

Default grid-columns settings

  • Column gap: 0
  • Row gap: 0
  • Padding: 0
  • Border: 0

Step 2: Specify number of columns for all screen sizes or for specific breakpoints

Options and their class:

  • 2 columns: grid-columns--2
  • 3 columns: grid-columns--3
  • 4 columns: grid-columns--4
  • 5 columns: grid-columns--5
<div class="grid-columns grid-columns--2">
  <!-- displays content in 2col at all sizes… -->
</div>
<div class="grid-columns grid-columns--4">
 <!-- displays content in 4col at all sizes… -->
</div>

Responsive breakpoints:

  • sm: 550px;
  • md: 768px;
  • lg: 900px;
  • xl: 1280px;

Options for specific breakpoints

  • 2 columns: grid-columns--2@[sm|md|lg|xl]
  • 3 columns: grid-columns--3@[sm|md|lg|xl]
  • 4 columns: grid-columns--4@[sm|md|lg|xl]
  • 5 columns: grid-columns--5@[sm|md|lg|xl]
<div class="grid-columns grid-columns--2@sm grid-columns--3@lg">
  <!-- 1col default -- 2col @550px -- 3col @900px -->
  …
</div>
<div class="grid-columns grid-columns--3@md grid-columns--4@xl">
  <!-- 1col default -- 3col @768px -- 4col @91280px -->
  …
</div>

Step 3: Add grid column

<div class="grid-columns grid-columns--2">
  <div class="grid-column">
    … grid box content …
  </div>
  <div class="grid-column">
    … grid box content …
  </div>
</div>

Step 4: Specify number of columns a column should span (optional)

You can span one grid section over multiple columns to make layouts such as [2/3 / 1/3] -or- [1/5 / 3/5 / 1/5] -or- [1/3 / 2/3]

<div class="grid-columns grid-columns--3">
  <div class="grid-column grid-column__span-2">
    grid box spans 2/3
  </div>
  <div class="grid-column">
    grid box spans 1/3
  </div>
</div>

<div class="grid-columns grid-columns--3">
  <div class="grid-column">
    grid box spans 1/3
  </div>
  <div class="grid-column grid-column__span-2">
    grid box spans 2/3
  </div>
</div>

<div class="grid-columns grid-columns--4">
  <div class="grid-column">
    grid box spans 1/4
  </div>
  <div class="grid-column">
    grid box spans 1/4
  </div>
  <div class="grid-column grid-column__span-2">
    grid box spans 2/4
  </div>
</div>

Step 5: Use utility classes to style (optional)

Grid column gap

  • .column-gap-0
  • .column-gap-px
  • .column-gap-sm
  • .column-gap-md
  • .column-gap-lg
  • .column-gap-xl
  • .column-gap-2xl
  • .column-gap-3xl
  • .column-gap-4xl

Grid row gap

  • .row-gap-0
  • .row-gap-px
  • .row-gap-sm
  • .row-gap-md
  • .row-gap-lg
  • .row-gap-xl
  • .row-gap-2xl
  • .row-gap-3xl
  • .row-gap-4xl

Adding Padding & Margin

These classes are not specific to the grid-column system, but work well in creating the right layout when using the grid-column system. (CSS box model docs)

Padding

Padding can be added [inside] any container on all sides using p-xl or on individual sides using pt-xl pr-xl pb-xl pl-xl (top, right, bottom, left). The values (ex. -xl) can be mixed as needed.

  • .p[t|r|b|l]-0
  • .p[t|r|b|l]-px
  • .p[t|r|b|l]-sm
  • .p[t|r|b|l]-md
  • .p[t|r|b|l]-lg
  • .p[t|r|b|l]-xl
  • .p[t|r|b|l]-2xl
  • .p[t|r|b|l]-3xl
  • .p[t|r|b|l]-4xl

Margin

Margin can be added [outside] any container on all sides using m-xl or on individual sides using mt-xl mr-xl mb-xl ml-xl (top, right, bottom, left). The values (ex. -xl) can be mixed as needed

  • .m[t|r|b|l]-0
  • .m[t|r|b|l]-px
  • .m[t|r|b|l]-sm
  • .m[t|r|b|l]-md
  • .m[t|r|b|l]-lg
  • .m[t|r|b|l]-xl
  • .m[t|r|b|l]-2xl
  • .m[t|r|b|l]-3xl
  • .m[t|r|b|l]-4xl

Pulling it all together

Here is an example of a number of the classes put together to create a 2/3 / 1/3 layout that spans the full page — additional helper classes will be explained below…

<div class="full-bleed mt-3xl">
  <div class="wrapper grid-columns grid-columns--3@xl grid-columns--2@sm column-gap-xl row-gap-xl">
    <div class="grid-column__span-2 p-xl">
      <h2>Heading Text</h2>
      <p>copy...</p>
    </div>
    <div class="grid-column bg-lighter border-all p-xl">
      <h2>Heading Text</h2>
      <p>copy...</p>
    </div>
  </div>
</div>
  • full-bleed - this will make this div span the full width of the page. This can not be used if there is a menu on the page. Background color can also be added to these full bleed sections using the Background colour classes.
  • wrapper - this class will add appropriate padding (4rem) on the left and right so the content will be spaced away from the edge of the browser window

This example was taken from https://www.tyndale.ca/alumni in the “Alumni Benefits / Support Tyndale Students” section of the page.

Other utilities you can add