brad_frostNov 17, 2022

✎ Layout and Grid in Design Systems: https://bradfrost.com/blog/post/layout-grid-in-design-systems/

In this post, I break down how we approach layout and grid systems in the context of design systems.

Layout & Grid in Design Systems

Simply saying the word "grid" conjures up strong and confusing feelings. Kinda like puberty! With so much history and so many different (and sometimes competing) paradigms, it's no wonder conversations around layout and grid are so fraught, confusing, and contentious. I'm long overdue to share how w

Brad Frost
Show threadbrad_frostNov 17, 2022
Most design system components are "stuff": form fields, accordions, buttons, badges. Stuff. Layout and grid components serve as boxes to put that other stuff.
Show threadbrad_frostNov 17, 2022
The `layout-container` component is an important-yet-invisible component that caps the width of an experience and controls the padding between content and the viewport edge. https://codepen.io/bradfrost/pen/mdKrJXv
Show threadbrad_frostNov 17, 2022

Design systems can include common page layouts...or not. https://codepen.io/bradfrost/pen/ExRNKRm

Including page layouts in a design system ensures the other UI components in the library work properly within these common layouts.

Show threadbrad_frostNov 17, 2022
"Grid" is a confusing sonofabitch. The “grid” the designers wield (those light pink lines superimposed over a whitespace-rich design comp) is a different beast than the “grid” that developers wield (which includes CSS Grid, Flexbox, and a slew of other modern CSS techniques).
Show threadbrad_frostNov 17, 2022
"Grid" has different — and sometimes conflicting — paradigms across disciplines, and that causes all sorts of problems.
Donnie Damato does a fantastic job explaining the challenges around grid in his brilliant website, https://gridless.design/
gridless.design

get rid of the grid!

Show threadbrad_frostNov 17, 2022
In the design systems we build with our clients, we tend to create a `grid` and `grid-item` components that provide solutions for common, repeatable layout patterns. https://codepen.io/bradfrost/pen/wvXrP
Show threadbrad_frostNov 17, 2022
The `grid` component has variants for things like `side-by-side`, `2up`, `3up`, 1-to-3up`, `4up`, and other common patterns. This is common fare layout stuff to accomplish things like product grids for an ecommerce website, 3 promo touts on a homepage, basic form layout, etc.
Show threadbrad_frost

I'm excited for our container query-powered future. Design system creators can author truly fluid components that can be dropped into any arbitrary layout, sidebar, whatever, and Just Work.

This article on @smashingmag is a great primer: https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/

A Primer On CSS Container Queries — Smashing Magazine

CSS container queries have landed and are now available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.

Smashing Magazine
Nov 17, 2022 at 9:11pmWeb
Show threadbrad_frostNov 17, 2022

Layout & grid are often talked about in extremes. It’s either this totally easy, trivial thing or a totally unknowable, unsolvable riddle.

At the end of the day, there are tons of ways to tackle layout and grid, so feel free to share your own solutions and experience!