Flex Grid

12 column grid system based on flexbox.

Basic

Structure:

  • .row: the main container
    • .col-*@<breakpoint>: column class, etc: .col-4@md
.col-6
.col-6
.col-2@md
.col-2@md
.col-2@md
.col-2@md
.col-2@md
.col-2@md
.col-8@md
.col-4@md
.col-4@md
.col-4@md
.col-4@md
<div class="row">
  <div class="col-6">
    <div class="rect-box">.col-6</div>
  </div>
  <div class="col-6">
    <div class="rect-box">.col-6</div>
  </div>
</div>

<div class="row">
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
  <div class="col-2@md">
    <div class="rect-box">.col-2@md</div>
  </div>
</div>

<div class="row">
  <div class="col-8@md">
    <div class="rect-box">.col-8@md</div>
  </div>
  <div class="col-4@md">
    <div class="rect-box">.col-4@md</div>
  </div>
</div>

<div class="row">
  <div class="col-4@md">
    <div class="rect-box">.col-4@md</div>
  </div>
  <div class="col-4@md">
    <div class="rect-box">.col-4@md</div>
  </div>
  <div class="col-4@md">
    <div class="rect-box">.col-4@md</div>
  </div>
</div>

Responsive

Use .col-*@<breakpoint> column class to create responsive grid layout, etc: .col-4@md

.col-6@sm .col-7@md .col-8@lg
.col-6@sm .col-5@md .col-4@lg
.col-12 .col-6@sm .col-4@md
.col-12 .col-6@sm .col-4@md
.col-12 .col-6@sm .col-4@md
.col-12 .col-6@sm
.col-12 .col-6@sm
<div class="row">
  <div class="col-6@sm col-7@md col-8@lg">
    // ...
  </div>
  <div class="col-6@sm col-5@md col-4@lg">
    // ...
  </div>
</div>

Breakpoints

breakpoint value
sm 768px
md 1000px
lg 1200px

Offset

.col-6@sm .col-4@md
.col-6@sm .col-4@md .col-offset-4@md
.col-3@sm .col-offset-3@sm
.col-3@sm .col-offset-3@sm
.col-4@sm .col-offset-3@sm
.col-2@sm
<div class="row">
  <div class="col-6@sm col-4@md">
    // ...
  </div>
  <div class="col-6@sm col-4@md col-offset-4@md">
    // ...
  </div>
</div>

<div class="row">
  <div class="col-3@sm col-offset-3@sm">
    // ...
  </div>
  <div class="col-3@sm col-offset-3@sm">
    // ...
  </div>
</div>

<div class="row">
  <div class="col-4@sm col-offset-3@sm">
    // ...
  </div>
  <div class="col-2@sm">
    // ...
  </div>
</div>

Flex

Grid is based on flexbox, besides features below, you can attach all flexbox utility classes on .row element to change its layout

Remove gutter

Add .row--guterless on .row element to remove columns gutter

.col@md
.col@md
.col@md
<div class="row no-gutters">
  ...
</div>

Equal width

Add any number of .col@{breakpoint} to quickly create equal-width columns at certain breakpoint

.col@md
.col@md
.col@md
<div class="row">
  <div class="col@md">
    // ...
  </div>
  <div class="col@md">
    // ...
  </div>
  <div class="col@md">
    // ...
  </div>
</div>

Specify width

Specify some column's width, leaving rest space to create equal-width columns

.col@sm
.col@sm
.col-4@sm
.col@sm
.col@sm
<div class="row">
    <div class="col@sm">
        // ...
    </div>
    <div class="col@sm">
        // ...
    </div>
    <div class="col-4@sm">
        // ...
    </div>
    <div class="col@sm">
        // ...
    </div>
    <div class="col@sm">
        // ...
    </div>
</div>

Utility

For faster mobile-friendly development, use built-in responsive utility classes for showing and hiding content by device via media query.

Small Medium Large
.hidden Hidden Hidden Hidden
.hidden@sm Hidden Hidden Hidden
.hidden@md Visible Hidden Hidden
.hidden@lg Visible Visible Hidden
.shown Visible Visible Visible
.shown@sm Visible Visible Visible
.shown@md Hidden Visible Visible
.shown@lg Hidden Hidden Visible