Responsive 12-column Grid Layout – SpaceGrid

SpaceGrid is a lightweight CSS library used to render a responsive, 12-column grid layout for your modern web design.

How to use it:

Download and insert the spacegrid.css into the header of your html document.

<link rel="stylesheet" href="spacegrid.css">

Add grid items to the webpage as this:

<div class="row">
  <div class="space-1">
    <div class="rectangle">
    </div>
  </div>
</div>
<div class="row">
  <div class="space-2">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-2">
    <div class="rectangle">
    </div>
  </div>
</div>
<div class="row">
  <div class="space-3">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-3">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-3">
    <div class="rectangle">
    </div>
  </div>
</div>
<div class="row">
  <div class="space-4">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-4">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-4">
    <div class="rectangle">
    </div>
  </div>
  <div class="space-4">
    <div class="rectangle">
    </div>
  </div>
</div>
<div class="row">
    <div class="space-3">
      <div class="rectangle">
    </div>
    </div>
    <div class="space-66">
      <div class="rectangle">
    </div>
    </div>
</div>