Grido is a flexbox grid developed between Star Wars Rebels and A New Hope (Han shot first!)
// with npm
npm install grido
// with yarn
yarn add grido
// [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>
<div class="grido g--reverse">
...
</div>
<div class="grido g--vertical">
...
</div>
<div class="grido g--vertical g--reverse">
...
</div>
<div class="grido g--nowrap">
...
</div>
<div class="grido g--wrap-reverse">
...
</div>
<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>
<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>
This project is licensed under the terms of the MIT license.