Forget xs-col-5 or IbBox W(1/3), let’s use the same speak we do with people, with our machines. The way we talk about the grid, should be the same way we code the grid. Plus, components are getting popular, and this strategy is much better suited for cards, navbars, lists, etc, than a 12-column strategy.

<nav grid="columns" vertically-aligned="center" horizontally-distributed="between">…</nav>

Reads like a book right? This is bread and butter auto-layout. If this was your nav bar, each item would be perfectly vertically aligned and equally spread across the bar, butted up to the edges. Mmmmhmmm. Designer or client can add nav items, remove them, your component doesn’t care, it’s ready for dynamic content!

What’s not as ready for dynamic content, and needs extra child column nodes? Extrinsic grids like this:

<section class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">…</section>

Avoiding fixed widths in your layouts will help you be more nimble during development, while also speeding you up. If you need them, and times definitely still call for them, RAGrid’s made it easy:

<section grid columns="3">…</section>


Quick Links:


RAGrid can be downloaded using your favorite tools: npm i ragrid -D || yarn add ragrid || bower i ragrid -D

Getting started is easy, just add one attribute to your container <section grid>…</section>! Boom, that gives you columns. It’s very simple. There’s lots of examples below to help get you kickstarted. Even the attributes datatable below is a RAGrid (finishes chewing own dogfood).

This library empowers most of what flexbox can do, but not all of it. So when the time comes and your component needs some custom alignment, distribution, or sizing, the good news is that the selectors from RAGrid will not be a battle to work with in your media queries or override selectors. I hated that about Bootstrap (which is still a great tool), but customizing a layout got pretty gnar. Anticipate simplicity here.

Not Included:

RAGrid Attributes

Accepted Values
columns, rows, masonry
Starts a grid with self sized columns
forward, reverse
Quick attributes for layout direction
left, center, right
Alignment along the x-axis
top, center, bottom, baseline
Alignment along the y-axis
around, between, equal
Distribution along the x-axis
around, between, equal
Distribution along the y-axis
2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
Extrinsic traditional 12-column grid


Out of the box

Self sized, aligned top left, & rag<section grid>…</section>


Perfect spacing amongst variable sized children, forget about gutters<section grid="columns" horizontally-distributed="around">…</section>


Top, right, bottom, left, center; it’s all available<section grid="columns" vertically-aligned="bottom">…</section>


Hey what, this isn’t in the align panel<section grid vertically-aligned="baseline">…</section>


Reverse the children<section grid order="reverse">…</section>


Distributed edge to edge, vertically aligned center, and reversed! <section grid="columns" horizontally-distributed="between" vertically-aligned="center" order="reverse">…</section>

Equal Width

Resize to watch these stretch to fit the space, so cool<section grid="columns" horizontally-distributed="equal">…</section>

Equal Height

Glorious<section grid="columns" vertically-distributed="equal">…</section>


Switch to rows anytime

Rag by default like columns<section grid="rows">…</section>

Align Center

No stupid math offsets to get this beauty<section grid="rows" horizontally-aligned="center">…</section>

Align Right

Still no stupid offsets, simple alignment<section grid="rows" horizontally-aligned="right">…</section>


Distributed edge to edge, vertically aligned center, and reversed! <section grid="rows" horizontally-distributed="between" vertically-aligned="center" order="reverse">…</section>

Full Width

Classic<section grid="rows" vertically-distributed="equal">…</section>



Change the height on this container to change the masonry fit. Also notice the count and flow.<section grid="masonry" vertically-aligned="center">…</section>

Intrinsic Sizing

Horizontal masonry type effect from letting children self size<section grid>…</section>

Extrinsic Sizing

But the children can be told a size, similar to most grids<section grid columns="5">…</section>



No 12-column grid, perfect alignment, minimal nodes: see codepen<div class="card" grid="rows" vertically-distributed="equal">…</div>

Card Title

November 5th, 2017

Wait a minute. Wait a minute, Doc. Uhhh… Are you telling me that you built a time machine… out of a DeLorean?! Whoa. This is heavy.

Notorious Vertical Center

Reads like a book, handles multiline perfectly, ready for Wordpress or React feature blocks<section grid horizontally-aligned="center" vertically-aligned="center">…</section>

Sweet Feature

Change my text value, watch me stay centered!


Nested alignments and distributions are easy<nav grid="columns" vertically-aligned="center" horizontally-distributed="between">…</nav>