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

Category: CSS & CSS3 , Layout , Recommended | June 27, 2017
Author: joeberthelot88
Views Total: 1,963
Official Page: Go to website
Last Update: June 27, 2017
License: MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply