Minimalist Responsive Grid System – Kindling Grid

Category: CSS & CSS3 , Layout | March 30, 2017
Views Total:185 views
Official Page:Go to website
Last Update:March 30, 2017


Minimalist Responsive Grid System – Kindling Grid


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>

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>



Added vendor prefixes to vanilla version

You Might Be Interested In:

Leave a Reply