Minimalist Responsive Grid System – Kindling Grid

Author: timothylong
Views Total: 180 views
Official Page: Go to website
Last Update: March 30, 2017
License: MIT


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

See also  Writing Pen using HTML and CSS

Leave a Reply

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