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 we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.
While we wait for browsers to implement the text-wrap: balance;#CSS property and value for text (pleeeeeease! 🙏), I may have created a silly — and probably sub-optimal — function to do it with HTML block elements:
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.
Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize later that the cause is something else. How many times have you been there?