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.

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.

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>
</div>

This will create two columns having equal widths.

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

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.

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

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.

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)

MIT © Ionică Bizău