grd 0,-1,0,0,0,0,4,0 editorconfig npm

A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

2 years after MIT

Grd

devDependency Status

A CSS grid framework using Flexbox.

  • Simple: Provides just 2 base classes Grid and Cell and some modifiers.
  • Light-weight: Only 321 bytes (Gzipped).
  • Flexible: Easy to use Flexbox features.

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.

Install

npm

$ npm install grd

bower

$ bower install grd

Usage

<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%

License

MIT © Shogo Sensui

Related Repositories

mlxtend

mlxtend

A library of extension and helper modules for Python's data analysis and machine ...

awesome-stars

awesome-stars

:book: My own stars :star: ...

trending-repositories

trending-repositories

:star: That are list of repositories that was trending for a day ...

stat

stat

GNU GSL Statistics library (v1.15, GPLv3) implemented in Go ...

brew

brew

brew: Python Ensemble Learning API ...


Top Contributors

1000ch

Dependencies

package version
dev autoprefixer ^7.0.0
cssnano ^3.10.0
postcss-apply ^0.8.0
postcss-cli ^4.0.0

Releases

-   v1.2.3 zip tar
-   v1.2.2 zip tar
-   v1.2.1 zip tar
-   v1.2.0 zip tar
-   v1.1.1 zip tar
-   v1.1.0 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar