CSS Grid Items Overlapping When Using Auto-Placement with Implicit Rows in Safari
I'm working on a project and hit a roadblock. I've been struggling with this for a few days now and could really use some help... I'm working with an scenario where CSS Grid items are overlapping in Safari when I use auto-placement along with implicit rows. I'm trying to create a layout where grid items automatically fill the available space, but in Safari (version 15.1), some items are rendered incorrectly. For example, I have the following CSS for my grid container: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; gap: 10px; } ``` And I'm adding items like this: ```html <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> ``` In Chrome and Firefox, everything appears as expected, but in Safari, the second and third items overlap. To troubleshoot, I tried adding `grid-auto-flow: dense;`, but that didn't resolve the overlapping scenario. I also verified that there are no negative margins or positioning that might interfere with the layout. Any suggestions on how to fix this or if there's a known bug with Grid in Safari? For context: I'm using Html/Css on Ubuntu.