CSS Grid Overlapping Elements in Firefox with Custom Breakpoints
I'm trying to debug I'm stuck trying to I've been banging my head against this for hours. Hey everyone, I'm running into an issue that's driving me crazy... I'm having an scenario with my CSS Grid layout where elements are overlapping in Firefox, but they display correctly in Chrome. The layout is set to adjust at specific breakpoints using custom media queries. Here's a simplified version of the CSS and HTML: ```html <div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div> ``` ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 768px) { .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .container { grid-template-columns: 1fr; } .item { margin: 0; } } ``` In Firefox, when the viewport is less than 768px, the second item overlaps the first item, creating a messy layout. I've tried adding `overflow: hidden;` to the container and `clear: both;` to the items, but that hasn't resolved the scenario. I also verified that there's no margin collapse happening by inspecting the elements. This scenario seems specific to Firefox since everything looks fine in Chrome and Edge. Is there a workaround or solution to fix this overlap scenario in Firefox while keeping the responsiveness intact? I'm working on a application that needs to handle this. Any help would be greatly appreciated! This is part of a larger CLI tool I'm building. What am I doing wrong? Any advice would be much appreciated. For reference, this is a production CLI tool. Thanks, I really appreciate it!