Pattern Lab

Grid System

24/24
1/24
23/24
2/24
22/24
3/24
21/24
4/24
20/24
5/24
19/24
6/24
18/24
7/24
17/24
8/24
16/24
9/24
15/24
10/24
14/24
11/24
13/24
12/24
23/24
1/24
22/24
2/24
21/24
3/24
20/24
4/24
19/24
5/24
18/24
6/24
17/24
7/24
16/24
8/24
15/24
9/24
14/24
10/24
13/24
11/24
HTML

									
										<div class="demo">
  <div class="g-row">
    <div class="g g-24">24/24</div>
  </div>
  <div class="g-row">
    <div class="g g-1">1/24</div>
    <div class="g g-23">23/24</div>
  </div>
  <div class="g-row">
    <div class="g g-2">2/24</div>
    <div class="g g-22">22/24</div>
  </div>
  <div class="g-row">
    <div class="g g-3">3/24</div>
    <div class="g g-21">21/24</div>
  </div>
  <div class="g-row">
    <div class="g g-4">4/24</div>
    <div class="g g-20">20/24</div>
  </div>
  <div class="g-row">
    <div class="g g-5">5/24</div>
    <div class="g g-19">19/24</div>
  </div>
  <div class="g-row">
    <div class="g g-6">6/24</div>
    <div class="g g-18">18/24</div>
  </div>
  <div class="g-row">
    <div class="g g-7">7/24</div>
    <div class="g g-17">17/24</div>
  </div>
  <div class="g-row">
    <div class="g g-8">8/24</div>
    <div class="g g-16">16/24</div>
  </div>
  <div class="g-row">
    <div class="g g-9">9/24</div>
    <div class="g g-15">15/24</div>
  </div>
  <div class="g-row">
    <div class="g g-10">10/24</div>
    <div class="g g-14">14/24</div>
  </div>
  <div class="g-row">
    <div class="g g-11">11/24</div>
    <div class="g g-13">13/24</div>
  </div>
  <div class="g-row">
    <div class="g g-12">12/24</div>
    <div class="g g-12">12/24</div>
  </div>
  <div class="g-row">
    <div class="g g-23">23/24</div>
    <div class="g g-1">1/24</div>
  </div>
  <div class="g-row">
    <div class="g g-22">22/24</div>
    <div class="g g-2">2/24</div>
  </div>
  <div class="g-row">
    <div class="g g-21">21/24</div>
    <div class="g g-3">3/24</div>
  </div>
  <div class="g-row">
    <div class="g g-20">20/24</div>
    <div class="g g-4">4/24</div>
  </div>
  <div class="g-row">
    <div class="g g-19">19/24</div>
    <div class="g g-5">5/24</div>
  </div>
  <div class="g-row">
    <div class="g g-18">18/24</div>
    <div class="g g-6">6/24</div>
  </div>
  <div class="g-row">
    <div class="g g-17">17/24</div>
    <div class="g g-7">7/24</div>
  </div>
  <div class="g-row">
    <div class="g g-16">16/24</div>
    <div class="g g-8">8/24</div>
  </div>
  <div class="g-row">
    <div class="g g-15">15/24</div>
    <div class="g g-9">9/24</div>
  </div>
  <div class="g-row">
    <div class="g g-14">14/24</div>
    <div class="g g-10">10/24</div>
  </div>
  <div class="g-row">
    <div class="g g-13">13/24</div>
    <div class="g g-11">11/24</div>
  </div>
</demo>