Basic 12-column Grid Layout In Pure CSS/LESS – Less Grid Boilerplate

Preview:

Description:

Less Grid Boilerplate is a lightweight and standalone CSS/LESS library to generate a basic, responsive, flexible grid layout for modern web design.

How to use it:

Import the Less Grid Boilerplate into your web project.

<script src="less.js"></script>
<link rel="stylesheet/less"href="main.less">

Create a grid layout as follows:

<div class="container">
  <div class="row">
    <div class="full grid content-center-v content-center-h">.full</div>
  </div>
  <div class="row">
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
  </div>
  <div class="row">
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
  </div>
  <div class="row">
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
  </div>
  <div class="row">
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
  </div>
  <div class="row">
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
  </div>
  <div class="row">
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="one-half grid content-center-v content-center-h">.one-half</div>
  </div>
  <div class="row">
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
  </div>
  <div class="row">
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
  </div>
  <div class="row">
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
  </div>
  <div class="row">
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="two-thirds grid content-center-v content-center-h">.two-thirds</div>
  </div>
  <div class="row">
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
  </div>
  <div class="row">
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="one-third grid content-center-v content-center-h">.one-third</div>
  </div>
  <div class="row">
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="two-thirds middle grid content-center-v content-center-h">.two-thirds</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="two-thirds middle grid content-center-v content-center-h">.two-thirds</div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
    <div class="one-half middle grid content-center-v content-center-h">.one-half</div>
    <div class="one-fourth grid content-center-v content-center-h">.one-fourth</div>
  </div>
  <div class="row">
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
    <div class="one-half middle grid content-center-v content-center-h">.one-half</div>
    <div class="one-sixth grid content-center-v content-center-h">.one-sixth</div>
  </div>
  <div class="row">
    <div class="grid"></div>
    <div class="one-half middle grid content-center-v content-center-h">.one-half</div>
    <div class="grid"></div>
  </div>
  <div class="row">
    <div class="one-half middle grid content-center-v content-center-h">.one-half</div>
  </div>
  <div class="row">
    <div class="one-third middle grid content-center-v content-center-h">.one-third</div>
  </div>
  <div class="row">
    <div class="one-sixth middle grid content-center-v content-center-h">.one-sixth</div>
  </div>
</div>