CSS Grid Items Overlapping When Using minmax() with Auto Rows in Firefox
I've searched everywhere and can't find a clear answer. I'm working with a strange scenario with CSS Grid layout in Firefox. I'm trying to create a responsive grid with varying item sizes using the `grid-template-columns` and `grid-template-rows` properties. My grid items are specified to use `minmax()` for the columns, and I'm using `auto` for the rows. However, in Firefox, some of the grid items overlap instead of resizing properly. Here’s the code snippet I’m using: ```css .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: auto; gap: 10px; } .item { background: lightblue; border: 1px solid blue; padding: 20px; box-sizing: border-box; } ``` And here’s how I’m using it in HTML: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item" style="height: 150px;">Item 3</div> <div class="item">Item 4</div> <div class="item" style="height: 100px;">Item 5</div> </div> ``` In Chrome, everything works as expected, but in Firefox, Item 3 overlaps with Item 4, causing a layout mess. I’ve tried setting explicit heights for the grid items and adjusting the `grid-auto-rows` property, but the scenario continues. I’m testing this on Firefox 117.0.1. Is there something I’m missing with CSS Grid that might be causing this behavior? Any insights would be appreciated!