CSS Grid not aligning items as expected in Firefox 112 on responsive layout
I'm updating my dependencies and I'm working on a project and hit a roadblock. I'm building a responsive layout using CSS Grid, and I've run into an scenario where the grid items aren't aligning properly in Firefox 112. They seem to stack vertically instead of following the defined grid structure. Here’s my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .item { background-color: #4CAF50; color: white; padding: 20px; text-align: center; } @media (max-width: 600px) { .container { grid-template-columns: repeat(1, 1fr); } } ``` And this is the HTML structure: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> ``` I’ve checked the browser's developer tools, and the computed styles look correct. However, when I resize the window, the items don't respond and instead stack vertically without maintaining the grid structure. I tried adding `min-width: 0;` to the items, but it didn’t help. This works perfectly in Chrome and Edge but not in Firefox. Has anyone faced a similar scenario? Any suggestions on how to fix this or any known bugs with Firefox's implementation of CSS Grid? I'm working on a API that needs to handle this. How would you solve this? Any pointers in the right direction? I'm coming from a different tech stack and learning Css.