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>See Also:
JavaScript Video Conference Grid Layout Library with Gallery & Spotlight Modes
Responsive Hexagon Grid Layout Using CSS Grid and Container Queries
Neat Block Grid In Pure CSS – wall.css
Responsive Masonry Layouts with CSS Grid and Mason-it.js
Create Flexible Hexagonal Grids with HoneyCombLayoutJs
Build Interactive Draggable Layouts With JavaScript – Swapy
Create Responsive Slanted Grid Gallery With CSS Clip-path
Responsive CSS Masonry Grid Layout – Grid Overflow