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|3|4|5]”></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|3|4|5]@[sm|md|lg|xl]”></div>

Step 3: Add grid column

<div class=“grid-columns grid-columns--[2|3|4|5]”>
  <div class=“grid-column”>
    … content …
  </div>
...
</div>

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

<div class=“grid-columns grid-columns--[2|3|4|5]”>
  <div class=“grid-column grid-column__span-[2|3|4|5]”>
    … content …
  </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 it.

Padding

  • .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

  • .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

Other utilities you can add