Minimalist Responsive Grid System – Kindling Grid

Preview:

Description:

Kindling Grid is a minimalist pure CSS grid system that makes it easier to generate a responsive, flexible grid layout with support for custom offset.

How to use it:

Import the kindling.css in the head section of the document.

<link rel="stylesheet" href="css/kindling.css">

Create a three column grid layout as follow. Please note that the kindling is a 12-column grid system.

<div class="row">
  <div class="span-4">Left</div>
  <div class="span-4">Middle</div>
  <div class="span-4">Right</div>
</div>

Add the offset-x CSS class if you wish to apply a custom offset on a grid .

<div class="row">
  <div class="span-1">Left</div>
  <div class="span-2 offset-5">Middle</div>
  <div class="span-4">Right</div>
</div>

Changelog:

03/30/2017

Added vendor prefixes to vanilla version