0.5kb Responsive CSS Grid Framework – SMART CSS GRID

Preview:

Description:

SMART CSS GRID is an ultra-light (~0.5kb minified) CSS grid framework to create responsive, flexible, fluid, 12-column grid layout for your modern web app.

How to use it:

Import the SMART CSS GRID’s main stylesheet into the html document.

<link rel="stylesheet" href="smart-grid.css">

Create a basic grid system with the following CSS classes:

<div class="box one">1</div>
<div class="box one">2</div>
<div class="box one">3</div>
<div class="box one">4</div>
<div class="box one">5</div>
<div class="box one">6</div>
<div class="box one">7</div>
<div class="box one">8</div>
<div class="box one">9</div>
<div class="box one">10</div>
<div class="box one">11</div>
<div class="box one">12</div>
<div class="box two">1</div>
<div class="box two">2</div>
<div class="box two">3</div>
<div class="box two">4</div>
<div class="box two">5</div>
<div class="box two">6</div>
<div class="box three">1</div>
<div class="box three">2</div>
<div class="box three">3</div>
<div class="box three">4</div>
<div class="box four">1</div>
<div class="box four">2</div>
<div class="box four">3</div>
<div class="box six">1</div>
<div class="box six">2</div>
<div class="box twelve">1</div>

You can also merge the rows as these:

<div class="box four merge-three-rows">You can also merge rows</div>
<div class="box four">four</div>
<div class="box four">four</div>