implementing CSS Grid and overlapping items in Firefox - advanced patterns
I'm writing unit tests and I've searched everywhere and can't find a clear answer. I'm trying to debug I'm working with a question with CSS Grid layout where my items are overlapping in Firefox but rendering correctly in Chrome... I have defined a simple grid with `grid-template-columns: repeat(3, 1fr);` and some items that should occupy specific grid cells. The items are correctly placed in Chrome, but in Firefox, they seem to stack on top of each other. Here’s my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc; } .item:nth-child(1) { grid-column: 1 / 3; } .item:nth-child(2) { grid-column: 3; } .item:nth-child(3) { grid-column: 1 / -1; } ``` And here's the HTML structure: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` I've checked the developer tools and confirmed that the grid is being applied, but the layout looks completely different in Firefox. I've tried clearing the cache and checking if any browser extensions are interfering, but the question continues. Is there a specific way to structure my CSS Grid to ensure consistent behavior across browsers? Any insights would be appreciated! I'm on Ubuntu 22.04 using the latest version of Css. Any examples would be super helpful. I'm coming from a different tech stack and learning Css.