This is an easy grid to use, quite intuitive, in fact. The idea behind it is to eliminate the need to add classes in every element inside a grid. Isn’t it boring to see repeated classes everywhere in your code?

Why so many classes?

Suppose you need to make a four-column section in your layout. What would it be like in the current frameworks available out there? Look at it:

<div class="row">
  <div class="your-class col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Your content goes here -->
  </div>
  <div class="your-class col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Your content goes here -->
  </div>
  <div class="your-class col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Your content goes here -->
  </div>
  <div class="your-class col-xs-12 col-md-3 col-sm-3 col-lg-3">
    <!-- Your content goes here -->
  </div>
</div>

There are a lot of classes on those div’s, right?

What if you could write the same code like the example below?

<div class="four columns one-phone">
  <div class="your-class">
    <!-- Your content goes here -->
  </div>
  <div class="your-class">
    <!-- Your content goes here -->
  </div>
  <div class="your-class">
    <!-- Your content goes here -->
  </div>
  <div class="your-class">
    <!-- Your content goes here -->
  </div>
</div>

Much better, huh? That’s what it’s all about.

So will I have to leave my favorite framework to use this?

Eh, nope… You can mix it with any framework you already use. It only works if you use the grade class in the parent element. It’s unobtrusive.

Like this:

<div class="grade">
  <!-- Your content goes here -->
</div>

Browsers

Any modern browser able to render Flexbox properly can use this grid.

11*
12+
9+
28+
29+
12.1+

* Some small issues may occur since this browser is using old technology.

Columns

Define the number of columns once, not on every element.

Automatic columns

Creates columns automatically, according to the number of elements.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

<div class="columns">
  <div class="your-class">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="your-class">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="your-class">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

Fixed columns

Fixes the number of columns. You can use [number]-[query] to specify a different number in another window size.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

<div class="columns three one-phone">
  <div class="your-class">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="your-class">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="your-class">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
</div>

Stretch columns

In case of an odd number, or lack of columns to fill your layout, you can use this class to extend the remaining columns to fill the gaps.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Column 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Column 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Column 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone stretch columns">
  <div class="content">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="content">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="content">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="content">
    <strong>Column 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="content">
    <strong>Column 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="content">
    <strong>Column 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Justify columns

Justify the columns to use all the space available in the row.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Column 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Column 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Column 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone justify columns">
  <div class="content">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="content">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="content">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="content">
    <strong>Column 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="content">
    <strong>Column 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="content">
    <strong>Column 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Distribute columns

Distribute columns evenly in the row.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Column 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Column 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Column 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone distribute columns">
  [your html]
</div>

No gutter

Sometimes the closer the better.

Column 01

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Column 02

Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.

Column 03

Placeat, sequi, facere. Repellendus blanditiis dolor.

Column 04

A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?

Column 05

Fuga dolorum distinctio voluptatem nesciunt distinctio nam.

Column 06

Nam, quaerat blanditiis hic consequatur, libero non!

<div class="four three-tablet two-phone stretch columns no-gutter">
  <div class="your-class">
    <strong>Column 01</strong>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="your-class">
    <strong>Column 02</strong>
    <p>Pariatur adipisci non, blanditiis ad dolor fugit repudiandae.</p>
  </div>
  <div class="your-class">
    <strong>Column 03</strong>
    <p>Placeat, sequi, facere. Repellendus blanditiis dolor.</p>
  </div>
  <div class="your-class">
    <strong>Column 04</strong>
    <p>A nobis, dignissimos ipsam. Facere sequi, corrupti blanditiis?</p>
  </div>
  <div class="your-class">
    <strong>Column 05</strong>
    <p>Fuga dolorum distinctio voluptatem nesciunt distinctio nam.</p>
  </div>
  <div class="your-class">
    <strong>Column 06</strong>
    <p>Nam, quaerat blanditiis hic consequatur, libero non!</p>
  </div>
</div>

Lines

Define the number of lines once, not on every element.

Automatic lines

Creates columns automatically, according to the number of elements.

Line 01
Line 02
Line 03
Line 01
Line 02
Line 01
  <div class="columns three" style="height: 40vh">
    <div class="content lines">
      <div><strong>Line 01</strong></div>
      <div><strong>Line 02</strong></div>
      <div><strong>Line 03</strong></div>
    </div>
    <div class="content lines">
      <div><strong>Line 01</strong></div>
      <div><strong>Line 02</strong></div>
    </div>
    <div class="content lines">
      <div><strong>Line 01</strong></div>
    </div>
  </div>

Grid

Use a class only where you need it.

Divide

quarter
quarter
  <div class="columns no-gutter">
    <div class="item quarter">quarter</div>
    <div class="item"></div>
    <div class="item quarter">quarter</div>
  </div>
half
  <div class="columns no-gutter">
    <div class="item"></div>
    <div class="item half">half</div>
    <div class="item"></div>
  </div>
seventh
  <div class="columns no-gutter">
    <div class="item seventh">seventh</div>
    <div class="item"></div>
  </div>
eighth
half
eleventh
  <div class="columns stretch no-gutter">
    <div class="item eighth">eighth</div>
    <div class="item "></div>
    <div class="item half">half</div>
    <div class="item eleventh">eleventh</div>
  </div>

Multiply

ten-times
eleventh
  <div class="columns stretch no-gutter">
    <div class="item"></div>
    <div class="item ten-times">ten-times</div>
    <div class="item"></div>
    <div class="item eleventh">eleventh</div>
  </div>
three-times
  <div class="columns no-gutter">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item three-times">three-times</div>
  </div>

Reordering

Use a class only where you need it.

1
2
3
4
5
6
7
  <div class="columns no-gutter">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item first first-phone">7</div>
  </div>
1
2
3
4
5
6
7
  <div class="columns no-gutter">
    <div class="item last last-phone">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>

Nested grid

Grid inception, four levels allowed.

  <div class="columns no-gutter">
    <div class="item">
      <div class="columns no-gutter">
        <div class="item quarter"></div>
        <div class="item"></div>
      </div>
    </div>
    <div class="item"></div>
    <div class="item half">
      <div class="columns no-gutter">
        <div class="item"></div>
        <div class="item half"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>

Positioning

Use a class only where you need it.

On top

This box has the to-top class.

Center

The container has the center all classes on it.

Bottom

This box has the to-bottom class. 
<div class="position-demo center all block columns">
  <div class="stuff to-top border text-center">
    <h4>On top</h4>
    <small>This box has the <code>to-top</code> class.</small>
  </div>
  <div class="stuff border text-center">
    <h4>Center</h4>
    <small>The container has the <code>center all</code> classes on it.</small>
  </div>
  <div class="stuff to-bottom border text-center">
    <h4>Bottom</h4>
    <small>This box has the <code>to-bottom</code> class.</small>
  </div>
</div>


To the left

This box has the to-left class.

To the right

This box has the to-right class. 
<div class="position-demo center all block columns">
  <div class="stuff to-left border  quarter text-center">
    <h4>To the left</h4>
    <small>This box has the <code>to-left</code> class.</small>
  </div>
  <div class="stuff to-right border quarter text-center">
    <h4>To the right</h4>
    <small>This box has the <code>to-right</code> class.</small>
  </div>
</div>

Visibility

Hide and show it with class. Literally.

Visible phone

Visible tablet

Visible desktop

Hidden on phones

Hidden on tablet

Hidden on desktop 

  <div class="visible-phone">
    <h1>
      <i class="icon-mobile"></i>
    </h1>
    <p class="text-center">Visible phone</p>
  </div>
  <div class="visible-tablet">
    <h1>
      <i class="icon-tablet"></i>
    </h1>
    <p class="text-center">Visible tablet</p>
  </div>
  <div class="visible-desktop">
    <h1>
      <i class="icon-display"></i>
    </h1>
    <p class="text-center">Visible desktop</p>
  </div>
  
  <p class="hidden-phone">
    <i class="icon-mobile"></i>
    <small>Hidden on phones</small>
  </p>
  <p class="hidden-tablet">
    <i class="icon-tablet"></i>
    <small>Hidden on tablet</small>
  </p>
  <p class="hidden-desktop">
    <i class="icon-display"></i>
    <small>Hidden on desktop</small>
  </p>

Masonry

Show your images in columns, without any javascript.

Image
Image
Image
Image
Image
Image
Image
Image 
<div class="mason three three-tablet two-phone">
  [your html here]
</div>

Embeds

Paste your embed, tell the proportion and boom... It just works.

   <div class="embed [widescreen | sd | phone | cinema-wide | square]">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/KJoP0dJyToo" frameborder="0"
       allowfullscreen></iframe>
   </div>
Widescreen (16:9)
SD (4:3)
Phone (9:16)
Cinema (2:35/1)
Square (1:1)

That’s all, folks!

By the way, did you like the TOC at the side? Click here to get more info!