CSS grid layout not respecting minmax values in Safari 16
I'm having trouble with I'm working with an scenario with CSS Grid where the `minmax` function seems to be ignored in Safari 16. I have a simple grid layout defined like this: ```css .container { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 16px; } .item { background-color: #f0f0f0; border: 1px solid #ccc; padding: 20px; } ``` In other browsers like Chrome and Firefox, this layout works perfectly, with each grid item maintaining a minimum width of 200px and expanding to fill the available space. However, in Safari, the grid items are squished together regardless of the specified `minmax` values, and they seem to be disregarding the minimum width altogether. I've tried adding a `width` property to the `.item` class, but that didn’t resolve the scenario. I also checked if there were any conflicting styles applied elsewhere in my CSS, but everything looks fine. Additionally, I made sure that the `-webkit-` prefix isn't necessary for the `minmax` function since I checked the compatibility tables. Here's the HTML structure I'm using: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` The expected behavior is for each item to maintain a minimum width of 200px, but in Safari, they just collapse to a smaller size, making the layout look broken. Is there a workaround or a specific setting in Safari that I might be missing? Any insights would be greatly appreciated! Has anyone dealt with something similar?