👀 Views: 0 💬 Answers: 1 📅 Created: 2025-06-16

css grid safari

Quick question that's been bugging me - Quick question that's been bugging me - I'm working with an scenario with CSS Grid not aligning items as expected in Safari 15. The layout looks perfect in Chrome and Firefox, but in Safari, the grid items are not aligning to the specified columns, causing overlapping and misalignment. Here's the relevant CSS that I'm using: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; } .item { background-color: lightblue; padding: 20px; border: 1px solid darkblue; } ``` And my HTML structure looks like this: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> ``` I've tried adjusting the `grid-gap` size, experimenting with `grid-template-rows`, and even adding `min-height` to the items, but nothing seems to work. When inspecting the elements in Safari, I noticed that the `.item` elements are showing as flex items instead of grid items, which might be part of the scenario. I’ve also cleared the cache and tried on different devices running Safari 15, but the question continues. Is there a known scenario or a workaround for this specific case in Safari? Any suggestions would be greatly appreciated! I'd really appreciate any guidance on this. Is there a better approach? My development environment is macOS. What's the best practice here?