Ahmad Shadeed avatar Ahmad Shadeed

The Minimum Content Size In CSS Grid

Screenshot of “The Minimum Content Size In CSS 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?

I don't know how many times, but it just happened today! Well, I saw it today, but I fear it's been there for a while.

On my archives page, the list of contents was overlaping the search filters when there was a long <pre> element:

Fortunately, I quickly found Ahmad's post about this behavior of CSS Grid where "the minimum content size of a grid item is auto, [which] means a grid item can expand its width due to long content".

After adding a simple min-width: 0 to the overlaping Grid item, it was fixed! 🎉

Thanks a lot Ahmad for sharing this!


  1. screenshot of Layout & Grid in Design Systems

    Brad Frost avatar Brad Frost

    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.

  2. screenshot of gridless.design

    Donnie D'Amato avatar Donnie D'Amato

    gridless.design

    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.