Minimalist Responsive Grid System – Kindling Grid

Category: CSS & CSS3 , Layout | March 30, 2017
Author: timothylong
Views Total: 1,971
Official Page: Go to website
Last Update: March 30, 2017
License: MIT

Preview:

Minimalist Responsive Grid System – Kindling Grid

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

You Might Be Interested In:


Leave a Reply