CSS Grid Gaps optimization guide as Expected in Firefox for Nested Grids
I'm not sure how to approach I'm working on a layout using CSS Grid and I'm working with an scenario where the gaps between nested grid items are not rendering correctly in Firefox (version 118). I have a parent grid that contains several child grids, and I expected the `gap` property to apply consistently across all levels. Instead, inner grid items are sticking together without any spacing. Here's a snippet of the relevant code: ```css .parent-grid { display: grid; gap: 20px; } .child-grid { display: grid; gap: 10px; } ``` And my HTML structure looks like this: ```html <div class="parent-grid"> <div class="child-grid"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <div class="child-grid"> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> </div> ``` In Chrome, everything looks as expected, with clear gaps between both the parent and child grids. However, in Firefox, the items within the child grids are directly touching each other, which is not the behavior I anticipated. I’ve tried adding margins to the `.item` class, but that leads to inconsistent spacing and breaks the grid alignment. Is there something I'm missing regarding CSS Grid gaps, or is this a known scenario with Firefox? Any suggestions for a workaround would be greatly appreciated! I'm using Css 3.11 in this project. Cheers for any assistance!