👀 Views: 58 💬 Answers: 1 📅 Created: 2025-06-10

css grid safari CSS

I'm stuck trying to I'm attempting to set up I'm experiencing an scenario with CSS Grid where my grid items are not resizing as expected in Safari 16.1. I'm using the following grid configuration: ```css .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-gap: 16px; } .item { background-color: #3498db; height: 200px; } ``` The intention is to have items fill the available space responsively. However, in Safari, some of the items are visibly larger than others, and they overflow the container, distorting the layout. I’ve verified that the same code works perfectly in Chrome and Firefox. I’ve tried adding `overflow: hidden;` to the `.container` to see if it mitigates the scenario, but it doesn’t resolve the question. The overflow continues, and it affects the overall appearance. Here’s the HTML structure I’m using: ```html <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> ``` I also attempted to explicitly set the width of `.item` to `100%`, but that only resulted in narrower items that didn’t fill the grid space as intended. I’ve also checked for any CSS resets that might be influencing the layout but found none. Has anyone experienced similar issues with CSS Grid in Safari? Are there any specific workarounds or best practices for ensuring consistent behavior across browsers, particularly for auto-placement scenarios? I've been using Css for about a year now. Hoping someone can shed some light on this.