If you thought CSS Grid solves issues where overflowed content escaping the confines of a horizontal layout, then think again. Dave Rupert writes up two ways he unintentionally broke outside the grid and how he wrangled things back into place.
As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something mysterious was breaking the container. I thought Grid sort of auto-solved sizing.
Eventually I found two ways to break CSS Grid. As it would happen, I was doing both in the same layout.
Turns out these special cases boil down to:
- Using
overflow-xon an grid element - Using grid on form controls (or, more specifically, replaced elements)
Dave’s solution is a set of CSS rules affectionately named Fit Grid, which is a helper class that effectively removes and replaces the automated min-width: auto property assigned to grid items. This is a super helpful resource, though he admits it toes the line of “Clearfix 2.0” territory.
