CSS Grid with Dynamic Content Not Aligning Properly in Safari 15
I'm not sure how to approach I'm experiencing an scenario with CSS Grid where dynamically loaded content is not aligning correctly in Safari 15. I have a grid layout that should display four items per row, but when I load additional items via JavaScript, they appear misaligned or stacked incorrectly. The same code works perfectly in Chrome and Firefox. Here's a simplified version of my grid setup: ```css .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .item { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; } ``` And here’s the JavaScript code I’m using to dynamically add items: ```javascript const container = document.querySelector('.container'); for (let i = 0; i < 10; i++) { const item = document.createElement('div'); item.classList.add('item'); item.textContent = `Item ${i + 1}`; container.appendChild(item); } ``` When I run this in Safari, the last few items either overflow or are misaligned. Specifically, the last item of the fourth row appears to overlap with an item from the third row. I have tried adding `grid-auto-rows: minmax(100px, auto);` to the container, but that didn’t seem to help. I also ensured that I cleared any browser cache, but the scenario continues only in Safari. Does anyone have any insights on how to resolve this alignment scenario in Safari when using CSS Grid with dynamically added content? The project is a service built with Javascript. Cheers for any assistance!