Skip to content
A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).
HTML CSS
Branch: master
Clone or download
Latest commit ae1320a Jul 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Drop postcss-apply Mar 16, 2018
.editorconfig Initial commit Mar 10, 2016
.gitignore Do not ignore Mar 10, 2016
index.html Fix github buttons Jul 21, 2019
license Add a license file. fixes #5 Mar 16, 2016
logo.png
package-lock.json Fix vulnerabilities Jul 21, 2019
package.json Fix postcss config Sep 15, 2018
readme.markdown Tweaks Jul 21, 2019

readme.markdown

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

You can’t perform that action at this time.