HomeNewsBreaking the Grid Two ways to break CSS Grid and how to fix it

Breaking the Grid Two ways to break CSS Grid and how to fix it



medium bookmark / Raindrop.io | 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. 🤦‍ We had a subnavigation pattern in our checkout that would overflow-x to reveal more payment options. Even with overflow-x: