A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
See the code
A CSS grid framework using Flexbox.
Grid and Cell and some modifiers.Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).
If you want to use Grd with Sass, you can choose grd-sass as Sass port.
npm install grd
<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>
Grid modifiers| Vertical layout | Description |
|---|---|
-top | Pull items to top |
-middle | Pull items to middle |
-bottom | Pull items to bottom |
-stretch | Stretch items |
-baseline | Pull items to baseline |
| Horizontal layout | Description |
|---|---|
-left | Layout items to left |
-center | Layout items To center |
-right | Layout items to right |
-between | Add spaces between items |
-around | Add spaces around items |
Cell modifiers| Cell width | Description |
|---|---|
-fill | Set item width to left |
-1of12 | Set item width to 8.3% |
-2of12 | Set item width to 16.7% |
-3of12 | Set item width to 25% |
-4of12 | Set item width to 33% |
-5of12 | Set item width to 41.7% |
-6of12 | Set item width to 50% |
-7of12 | Set item width to 58.3% |
-8of12 | Set item width to 66.7% |
-9of12 | Set item width to 75% |
-10of12 | Set item width to 83.3% |
-11of12 | Set item width to 91.7% |
-12of12 | Set item width to 100% |
Overall
Maintained
Code review
npm
Latest release
Releases this year
502 followers · starred Mar 2016
51 followers · starred Mar 2016
55 followers · starred Mar 2016
161 followers · starred Mar 2016
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
See the code
A CSS grid framework using Flexbox.
Grid and Cell and some modifiers.Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).
If you want to use Grd with Sass, you can choose grd-sass as Sass port.
npm install grd
<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>
Grid modifiers| Vertical layout | Description |
|---|---|
-top | Pull items to top |
-middle | Pull items to middle |
-bottom | Pull items to bottom |
-stretch | Stretch items |
-baseline | Pull items to baseline |
| Horizontal layout | Description |
|---|---|
-left | Layout items to left |
-center | Layout items To center |
-right | Layout items to right |
-between | Add spaces between items |
-around | Add spaces around items |
Cell modifiers| Cell width | Description |
|---|---|
-fill | Set item width to left |
-1of12 | Set item width to 8.3% |
-2of12 | Set item width to 16.7% |
-3of12 | Set item width to 25% |
-4of12 | Set item width to 33% |
-5of12 | Set item width to 41.7% |
-6of12 | Set item width to 50% |
-7of12 | Set item width to 58.3% |
-8of12 | Set item width to 66.7% |
-9of12 | Set item width to 75% |
-10of12 | Set item width to 83.3% |
-11of12 | Set item width to 91.7% |
-12of12 | Set item width to 100% |
Overall
Maintained
Code review
npm
Latest release
Releases this year
502 followers · starred Mar 2016
51 followers · starred Mar 2016
55 followers · starred Mar 2016
161 followers · starred Mar 2016