Why?

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>

Features:

Quick Links:

Docs

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

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

Columns

Out of the box

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

Distribution

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

Alignment

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

Baseline

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

Order

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

Combo

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>

Rows

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>

Combo

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>

Grids

Masonry

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>

Examples

Cards

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!

Navbars

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