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