Why?

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

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

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

Extrinsic grids like the one below, aren’t ready for dynamic content and require extra nodes for each column:

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

Features:

Quick Links:

Docs

Downloading

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

Getting Started

Get started by adding a grid attribute to your container: <section grid>…</section>. Boom, that treats all children of that node as alignable and distributable. Given the children of that section are small and/or have a size set, they’ll align to the top left of the container as if they were text in a paragraph.

Examples below are there to help get you kickstarted. There’s also this codepen to poke.

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. The attributes datatable below is a RAGrid (finishes chewing own dogfood).

Common Gotchas / Tips

Thinking with the mindset of setting the sizes of your child elements and then distributing them is a bit different. Often you’ll forget to set the size of a child element and be suprised when it fills the space.

RAGrid doesn’t have any flex value helpers, things like flex: 1 or flex: 3. Adding these to children can be really helpful when you want elements to dominate or shrink in the container.

On top of sharing space, you’ll be needing flex-basis, box-sizing, margin and padding to help you with your other use cases. Margin auto works from all directions too. Plus, at the child node level, you can leverage align-self and justify-self to put those off grid items into place.

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

Inspect the code for further learning & understanding

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>