Gridder: Flexbox Grid System

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

Download Gridder v2.2.1 Github

Gridder v2.2.1 🥳

The new Gridder v2.2.1 is live! Looking for documentation for Gridder v1.5.1? click here.

Get Started

Simply download Gridder and add it to your website's head, like this:


                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <link href="path/to/gridder.css" rel="stylesheet">

                                    <div class="container">
                                        <div class="row">
                                            <div class="tiny-2">My</div>
                                            <div class="tiny-4">Grid</div>
                                            <div class="tiny-6">System</div>


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


Yes! The latest build(v2.2.1) of Gridder is available on jsdelivr:

Frequently asked questions

What about browser support ?

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

What is in store for Gridder in the future ?

We are currently working on a new version of gridder, built with a mix of CSS Flexbox and CSS Grid Layout.

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.