Anyone knows why in #Firefox sometimes the button in the bottom of https://nicolas-hoizey.com/archives/ is outside its container, while everything is fine in #Chrome? 🤔
Maybe a CSS Grid issue?
Rendering issue in Firefox
Everything is fine in Chrome
Firefox 110 will be released on February 14th, for all Container Queries lovers! 🥰
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.
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.
Yet another great Utopia tool, this time for grids, but the right way:
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links!
Brad Frost
Donnie D'Amato
Trys Mudford
Hubert Sablonnière