CSS Grid Item Overlapping and Disappearing in Firefox 118 with Auto Layout
I'm writing unit tests and I'm confused about I recently switched to I've looked through the documentation and I'm still confused about I'm experiencing an scenario with a CSS Grid layout where some items overlap and disappear when I view the page in Firefox 118... The grid is set to auto layout, but the behavior seems erratic compared to Chrome. For instance, I have a 3-column grid defined like this: ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; } .grid-item { background: lightblue; padding: 20px; border: 1px solid #ccc; } ``` In my HTML, I'm rendering a set of items dynamically, like so: ```html <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> <div class="grid-item">Item 5</div> <div class="grid-item">Item 6</div> </div> ``` In Firefox, when the page loads, items 5 and 6 are either overlapping with items above them or completely not visible. I've tried adding `min-height` and adjusting `grid-auto-rows`, but nothing seems to fix the scenario. I also checked for any browser-specific CSS properties or compatibility issues and used `display: contents;` on the grid items, but it didn't help either. Interestingly, everything behaves as expected in Chrome. Has anyone else encountered similar problems in Firefox with CSS Grid and found a solution? What's the best practice here? My development environment is CentOS. Thanks for any help you can provide! I've been using Css for about a year now. Thanks for any help you can provide! This is part of a larger web app I'm building. Has anyone else encountered this?