A grid for boxes.

4 columns. But you can put column inside column, so you have as much columns as you need.

Pssst… It's responsive.

Demonstration

1 2 3 4 5 6 7 8

<div class="box-50"> <div class="box-50"> <span class="circle-number">1</span> </div> <div class="box-25"> <span class="circle-number">2</span> </div> <div class="box-25"> <span class="circle-number">3</span> </div> <div class="box-50 half-height"> <span class="circle-number">4</span> </div> <div class="box-100 half-height"> <span class="circle-number">5</span> </div> </div> <div class="box-50 half-height"> <span class="circle-number">6</span> </div> <div class="box-25"> <span class="circle-number">7</span> </div> <div class="box-25"> <span class="circle-number">8</span> </div>

An explanation:

You have 4 classes to use as a grid:

Class: box-25 A box with 25% of width. Class: box-50 A box with 50% of width. Class: box-75 A box with 75% of width (I still don't use this one for nothing ). Class: box-100 A box with 100% of width.

You can put one inside other infinitily, I don't recommend more than one, but you can.

Use the class half-height to divid the box in half (derp).

New classes!

double-height for the double height of the box.

triple-height for the triple height of the box (kinda of obvious).

Made by a human

You can find me on facebook or instagram.