Gridder - The simple grid system based on Flexbox.

Gridder's fluid grid and breakpoints enable endless combinations of column sizes, offsets, allignments and viewport widths.

Download Gridder Visit Github
Fluid grid
How it works

The syntax

First, make sure to wrap your columns in a row element. Then specify your columns and stick your content inside. Use the following classes to identify your coloumns: tiny-* small-* medium-* large-*

* is a number between 1 and 12, where 1 is a single column.


<div class="row">
  <div class="tiny-12">
    This spans 12/12 columns on all screensizes
  </div>
</div>

<div class="row">
  <div class="medium-6">
    This spans 6/12 columns on screens wider then
    the medium breakpoint, but will span 12/12 on smaller screens
  </div>
</div>

<div class="row">
  <div class="small-12 medium-6 large-4">
    This spans 12/12 columns on small screens,
    6/12 on medium screens and 4/4 on large screens
  </div>
</div>
          
Getting started

Quick installation guide

Simply download gridder and add it to your head, like this:


// index.html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="path/to/gridder.css" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
          

Remember to add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head aswell, to make sure the site scales correctly


Gridder is also available through this jsdelivr:


https://cdn.jsdelivr.net/npm/[email protected]/gridder.min.css
          

You can also add Gridder with NPM:


npm install gridder-css
          

Frequently asked questions


What about browser support ?

Gridder works in all modern browsers. IE10+ Edge Firefox Chrome Safari Opera

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

What is in store for Gridder in the future ?

Were currently working on a new version of gridder built entirely on CSS Grid Layout. This build, however, will remain experimental untill the it is fully supported in all major browser

Should I use Gridder in my next project?

The short answer... YES!

Gridder is built to be scalable, and thus works for small, aswell as large projects. There's been some controversy about the speed of flexbox when used for pagelayouts, but this has been debunked

With that said, Gridder excels in small to mid-sized projects, largly because of it's easy of use and setup.