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.
Download CSS Download SCSS Github
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).