Brad Frost

Layout & Grid in Design Systems

https://bradfrost.com/blog/post/layout-grid-in-design-systems/

This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process, design comps are treated as sacrosanct, and developers see that 12-column semi-transparent pink guideline as a hard requirement that must implemented exactly as articulated by the static design tool. This is how a “how to do a 12-column grid in HTML/CSS?” Google search ultimately led to massive success for tools like Bootstrap. Despite the introduction of many new CSS technologies and layout techniques over many years, this antiquated 12-column mental model still dominates a lot of conversations around layout and grid.

• older link:
  gridless.design
• newer link:
  Our web design tools are holding us back

---

Related contents with similar topics

1. 

   Donnie D'Amato

   gridless.design

   • Nicolas Hoizey
   • 27 November 2022
   • Grid, Flexbox, CSS, layout
   • 11 reactions

   The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how…

2. 

   Trys Mudford

   It's all about that space

   • Nicolas Hoizey
   • 26 November 2022
   • CSS, Grid
   • 2 reactions

   Yet another great Utopia tool, this time for grids, but the right way: the 12 column grid itself is an illusion, or at best a fading artefact of the…

3. 

   Hubert Sablonnière

   Prevent layout shifts with CSS grid stacks

   • Nicolas Hoizey
   • 27 July 2022
   • CSS, Grid, CLS, Core Web Vitals, WebPerf
   • 22 reactions

   I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…

4. 

   Ahmad Shadeed

   The Minimum Content Size In CSS Grid

   • Nicolas Hoizey
   • 30 January 2022
   • CSS, Grid
   • 7 reactions

   Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize…

5. 

   Kev Bonett

   Expandable Sections Within a CSS Grid

   • Nicolas Hoizey
   • 15 October 2021
   • CSS, Grid
   • 5 reactions

   This is a great use case for CSS Grid's dense packing algorithm! I also love how Kev suggests this could replace annoying pop-ins/modals: This could…