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.

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:

Features:

• Columns and rows are intrinsicly sized by default, so they rag and flow like typography (RAGrid… get it…)

• It follows the Adobe/Sketch align tool jargon
• Layout is described via attributes & values instead of classes

• Offers a 12-column system, even though it’s trying to inspire you out of extrinsic grid sizing

• Can do horizontal and vertical masonry & packery with no javascript
• Number of children can change and not break your layout
• Auto-layout is cool 👍

Quick Links:

• Demo
• Docs
• Columns
• Rows
• Grids
• Examples

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:

• Media queries
• Polyfills or fallbacks if flexbox isn’t supported
• Shorthand methods

RAGrid Attributes