Why?

The way we talk about the grid in our teams, should be the same way we code the grid. Forget xs-col-5 or IbBox W(1/3) or whatever is in fashion, let’s use the same speak we do with people, with our machines.

This grid is a bit different though, in that it seeks to allow contents to decide their own size by default. Most grids are explicit about widths, and the content must block level fill the space. With RAGrid, you distribute and align the items which manage their own size.

tldr;

• Columns and rows are intrinsicly sized by default, so they rag like typography (RAGrid.. get it..)
• It follows the Adobe/Sketch align tool jargon
• Layout is done via attributes instead of classes
• Offers a 12-column system, even though it’s trying to inspire you out of extrinsic grid sizing
• It’s small, you could/should copy paste it into your project

Docs

Instead of writing lengthy docs, please find the RAGrid API/answers by inspecting the code in the examples below. Getting RAGrid into your project? IMHO, I’d say copy and paste the CSS into your project, good for you to know, and it’s very digestable. BUT, I did publish it to NPM so you can manage it like you do your other CSS dependencies:

npm i ragrid -D || yarn add ragrid

It’s very simple. So much so, that it might be good to quicky spell out the things you won’t find in RAGrid:

• No media queries
• No polyfills or fallbacks if flexbox isn’t supported
• No learning curve or flex of complexity