Responsive 12-column Grid Layout – SpaceGrid

Category: CSS & CSS3 , Layout , Recommended | February 21, 2017
Author: JonathanSpeek
Views Total: 2,057
Official Page: Go to website
Last Update: February 21, 2017
License: MIT

Preview:

Responsive 12-column Grid Layout – SpaceGrid

Description:

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>

You Might Be Interested In:


Leave a Reply