Responsive 12-column Grid Layout – SpaceGrid


Author: JonathanSpeek
Views Total: 903 views
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>

See also  Realistic iOS Switch In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *