Responsive Flexbox Based Grid Layout – Griddd

Preview:

Description:

Griddd is a lightweight, responsive, CSS flexbox based grid layout that is fully customizable via SASS.

Install and import the Griddd into your project:

$ npm install griddd

How to use it:

Load the minified version of the Griddd into the webpage.

<link href="dist/griddd.min.css" rel="stylesheet">

The basic html.

<div class="columns">
  <div class="is-4">4 Col</div>
  <div class="is-8">8 Col</div>
</div>
<div class="columns">
  <div class="is-2">2 Col</div>
  <div class="is-8">8 Col</div>
  <div class="is-2">2 col</div>
</div>
<div class="columns">
  <div class="is-8">8 Col</div>
  <div class="is-4">4 Col</div>
</div>

If you’d like to set the alignment.

<div class="columns alignment">
  <div class="is-12">
    <h1 class="start">.start</h1>
  </div>
  <div class="is-12">
    <h1 class="center">.center</h1>
  </div>
  <div class="is-12">
    <h1 class="end">.end</h1>
  </div>
</div>

Customize the grid layout using SASS:

$width: 100%; //Container Width
$resize: 100% - 5%; //Container Width
$gutter: 0.5; //gutter size
$columns: 12; //number of columns
$slug: is !default; // change it to col if you're comfortable
$breakpoint-md:  48em;  // tablets
$breakpoint-lg: 56.25em; // desktop
$breakpoint-xlg: 68.75em; // HD