The way we talk about the grid, should be the same way we code the grid. Forget
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>
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
- Number of children can change and not break your layout
- Auto-layout is cool 👍
RAGrid can be downloaded using your favorite tools:
npm i ragrid ||
yarn add ragrid ||
bower i ragrid -D
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
justify-self to put those off grid items into place.
- Media queries
- Polyfills or fallbacks if flexbox isn’t supported
- Shorthand methods
columns, rows, masonry
Starts a grid with self sized columns
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