Responsive Grid (12 columns)

The classes available are:

.col-60, (1/12th for 11 x 20px spacing)
.col-140, (1/6th for 5 x 20px spacing)
.col-220, (1/4 for 3 x 20px spacing
.col-300, (1/3rd for 2 x 20px spacing)
.col-380, (5/12 with 1 x 20px spacing)
.col-460, (half with 1 x 20px spacing)
.col-540, (7/12 with 1 x 20px spacing)
.col-620, (2/3rds with 1 x 20px spacing)
.col-700, (3/4th with 1 x 20px spacing)
.col-780, (5/6th with 1 x 20px spacing)
.col-860, (11/12th with 1 x 20px spacing)
.col-940 (full width with no spacing)

Here’s how they look. (Note, they all collapse under each other below 980px wide with the default media query break points.)

<div class="grid col-940">
<div class="grid col-460">
<div class="grid col-460 fit">
<div class="grid col-300">
<div class="grid col-300">
<div class="grid col-300 fit">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220 fit">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220">
<div class="grid col-220 fit">
<div class="grid col-540">
<div class="grid col-380 fit">
<div class="grid col-620">
<div class="grid col-300 fit">
<div class="grid col-700">
<div class="grid col-220 fit">
<div class="grid col-220">
<div class="grid col-700 fit">

Leave a Reply

Your email address will not be published. Required fields are marked *