⚡️ The minimal (~100-170 bytes) grid system for modern browsers.
Latest commit 148c8a4 Dec 19, 2016 @IonicaBizau ⬆️ 1.4.7 🎉




Patreon Buy AMA Version Downloads Get help on Codementor

The minimal (~100-170 bytes) grid system for modern browsers.

You don't need monolithic CSS frameworks for simple grid systems. ~100 bytes of CSS can save your life. 💫


In the dist directory there are three minified files:

  • gridly-core.min.css (105 B): just the Gridly core including same-width column support and mobile responsive support.
  • gridly-col-widths.min.css (115 B): the custom width columns
  • gridly.min.css (165 B): the previous two files' content put together

If you need to support more browsers, you can use the prefixed versions. They're located in dist/prefixed. They're ~1.8× the size of their counterparts.

Browser Support

Gridly supports browsers that implement the Flexible Box Layout Module.

As of December 2015, browser support for flexbox is 81.27% for unprefixed, and 95.44% for prefixed.

🚀 Available on CDN!

Gridly is available on cdnjs.com. Check it out.

https://cdnjs.cloudflare.com/ajax/libs/gridly/1.1.0/gridly-core.min.css https://cdnjs.cloudflare.com/ajax/libs/gridly/1.1.0/gridly-col-widths.min.css https://cdnjs.cloudflare.com/ajax/libs/gridly/1.1.0/gridly.min.css

If you do not need custom width columns, you will probably want to use only gridly-core.min.css in your page. If you do need the custom width columns, you have to include gridly.min.css instead.


Include the CSS file in your page:

<link rel="stylesheet" href="gridly.min.css" type="text/css" charset="utf-8">

Then you can use the .row and .col classes:

<div class="row">
    <div class="col">Two</div>
    <div class="col">Column</div>

This will create two columns having equal widths.


☁️ Installation

Check out the dist directory to download the needed files and include them on your page.

If you're using this module in a CommonJS environment, you can install it from npm and require it:

$ npm i --save gridly

📝 Documentation

The gridly-core.min.css file handles two classes:

  • row: the row containing columns
  • col: the column to put in the row

Because of the flexbox amazing power, the columns will have the same width (as many columns you want / row).

To extend this basic functionality, there is another file: gridly-col-widths.min.css. This adds the following classes:

  • col-tenth has 10% width
  • col-fifth has 20% width
  • col-quarter has 25% width
  • col-third has 33.3333334% width
  • col-half has 50% width

Like specified above, the gridly.min.css contains both: the core and the custom widths.

😋 How to contribute

Have an idea? Found a bug? See how to contribute.

💰 Donations

Another way to support the development of my open-source modules is to set up a recurring donation, via Patreon. 🚀

PayPal donations are appreciated too! Each dollar helps.

Thanks! ❤️

Run npm i to install the dependencies. Then, you can run the npm scripts using npm run <script-name>.

Run npm run release to recreate all the dist files.

💫 Where is this library used?

If you are using this library in one of your projects, add it in this list.

  • showalicense.com–A site to provide an easy way to show licenses and their human-readable explanations. (source)

📜 License

MIT © Ionică Bizău