grido

Grido

Grido is a flexbox grid developed between Star Wars Rebels and A New Hope (Han shot first!)

Installation

// with npm
npm install grido

// with yarn
yarn add grido

Usage

// [file].js
import 'grido'

<!-- [file].html -->
<div class="grido"> <!-- creates a container with flexbox -->
  <div class="g__col--1"> <!-- creates a column -->
  </div>
  <div class="g__col--5">
  </div>
  <div class="g__col--12"><!-- Grido supports 12 columns max -->
  </div>
  ...
</div>

Reverse order

<div class="grido g--reverse">
  ...
</div>

Vertical

<div class="grido g--vertical">
  ...
</div>

Vertical and reverse

<div class="grido g--vertical g--reverse">
  ...
</div>

No wrap

<div class="grido g--nowrap">
  ...
</div>

Wrap reverse

<div class="grido g--wrap-reverse">
  ...
</div>

Changed order

<div class="grido">
  <div class="g__col--2 g__order--5">
  </div>
  <div class="g__col--2 g__order--3">
  </div>
  <div class="g__col--2 g__order--1">
  </div>
  <div class="g__col--2">
  </div>
  <div class="g__col--2 g__order--2">
  </div>
</div>

Align-self

<div class="grido">
  <div class="g__col--4">
  </div>
  <div class="g__col--4 g--align-self-end">
  </div>
  <div class="g__col--4 g--align-self-center">
  </div>
</div>

License

This project is licensed under the terms of the MIT license.