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.
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.
🚀 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
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
<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.
If you're using this module in a CommonJS environment, you can install it from
$ npm i --save gridly
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:
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.
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.
npm i to install the dependencies. Then, you can run the npm scripts using
npm run <script-name>.
npm run release to recreate all the
💫 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)