Grd

A CSS grid framework using Flexbox.

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

Installation

# via npm
$ npm install grd

# via bower
$ bower install grd

Usage

Grd provides 2 classes as base, Grid and Cell.

<div class="Grid">
  <div class="Cell --3of12">3of12</div>
  <div class="Cell --9of12">9of12</div>
</div>

Grid modifiers

• To align items with align-items
  • --top: To top
  • --middle: To middle
  • --bottom: To bottom
  • --stretch: Stretch items
  • --baseline: To baseline
• To layout contents with justify-content
  • --left: To left
  • --center: To center
  • --right: To right
  • --between: Add spaces between items
  • --around: Add spaces around items

Cell modifiers

• --fill: Set item width to left width of parent
• --1of12: Set item width to 8.3% of parent
• --2of12: Set item width to 16.7% of parent
• --3of12: Set item width to 25% of parent
• --4of12: Set item width to 33% of parent
• --5of12: Set item width to 41.7% of parent
• --6of12: Set item width to 50% of parent
• --7of12: Set item width to 58.3% of parent
• --8of12: Set item width to 66.7% of parent
• --9of12: Set item width to 75% of parent
• --10of12: Set item width to 83.3% of parent
• --11of12: Set item width to 91.7% of parent
• --12of12: Set item width to 100% of parent

License

MIT: http://1000ch.mit-license.org