When using decimals in percentage to represent a fraction, browsers will choose to round differently.
Because of this it would most of the time be better to use calc.
For consistency, I recommend doing calc(100% / 12 * x) where x is the numerator for the grid length fraction.

According to the package.hsin their project is MIT however as there is no license.txt I thought I'd best ask.

The resource from “https://cdnjs.cloudflare.com/ajax/libs/grd/1.4.0/grd.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

'cos thr shld be a vrsn w/o smntc trsh

I got this error while trying to install this framework via npm >
npm ERR! Refusing to install grd as a dependency of itself

In pug templates using .Cell.-1of12 running with error

If a class name begins with a "-" or "--", it must be followed by a letter or underscore

It would be better to change "one dash" modifiers.
*BONUS: Much more lightweight ⚡

...they cannot start with a digit, two hyphens, or a hyphen followed by a digit. ..
http://www.w3.org/TR/CSS21/syndata.html#characters

Please add responsive classes

I didn't feel like creating a whole separate project for it, so I just add it here.
Some people, like me, prefer using SCSS to handle grid creation, so I took your code and applied it to sass.

@mixin grid($align: stretch, $justify: left) {
    @if $align == 'top'         { $align: flex-start; }
    @if $align == 'middle'      { $align: center; }
    @if $align == 'bottom'      { $align: flex-end; }
    @if $align == 'stretch'     { $align: stretch; }
    @if $align == 'baseline'    { $align: baseline; }

    @if $justify == 'left'      { $justify: flex-start; }
    @if $justify == 'center'    { $justify: center; }
    @if $justify == 'right'     { $justify: flex-end; }
    @if $justify == 'between'   { $justify: space-between; }
    @if $justify == 'around'    { $justify: space-around; }

    align-items: $align;
    display: flex;
    flex-wrap: wrap;
    justify-content: $justify;
}

@mixin cell($x: fill, $n: 12) {
    @if $x == 'fill' {
        flex-grow: 1;
        min-width: 0;
        width: 0;
    } @else {
        flex-grow: 0;
        width: calc(100% * (#{$x} / #{$n}));
    }

    box-sizing: border-box;
    flex-shrink: 0;
}

Dead easy to use.
grid() will default to default flex, so stretch and flex-start.
cell() will default to fill

Usage:
First parameter of cell() is the align-items position, will default to stretch, the second parameter of cell() is the justify-content, and it will default to flex-start

First parameter of cell() is where you specify it's width, it will default to auto fill it's width, the second parameter of cell() is how many "columns" there are, and will default to 12

Hi,

I've not tried it yet, but as I can see there's no fall-back support to older browsers? Kinda no use for real-world production :(

Awesome library. Any way to nest Grids within Cells?

https://cdnjs.cloudflare.com/ajax/libs/grd/1.4.0/grd.css

The version1.4.0 is not working. Is there any solution? Been downgrading the version to get grd to load.

include <stdio.h>

include <conio.h>

main(){
printf("hello world");
}
getch();

You use css variables, but it looks like that isn't supported by IE / Edge <15.
So css variables reduce the browser compatibility of grd?

http://caniuse.com/#feat=css-variables

For lazy ppl like me :D

http://caniuse.com/#feat=flexbox
http://caniuse.com/#feat=calc
....

Using classes like left and right means it's not RTL friendly, as they're the opposite. This is why the values are flex-start and flex-end