CSS Grid causing unexpected overlap of items with fractional units in modern browsers
I'm a bit lost with I'm optimizing some code but I'm updating my dependencies and I'm working on a project and hit a roadblock. I'm using CSS Grid to lay out a simple card component, but I'm working with an scenario where items are overlapping when using fractional units (fr) in defining the grid template columns. The component works fine in Chrome, but in Firefox, I'm seeing that the cards overlap each other instead of distributing evenly. Here’s the grid CSS I’m using: ```css .container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .card { background-color: #fff; border: 1px solid #ccc; padding: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } ``` And here’s the HTML structure: ```html <div class="container"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div> ``` I have tried adjusting the `grid-template-columns` to use fixed widths like `100px` and it resolves the overlap scenario, but I prefer the responsive nature of using `fr` units. Also, I've checked the box-sizing property and ensured that it's set to `border-box` globally: ```css * { box-sizing: border-box; } ``` I’m currently using Firefox 106.0 and I suspect there might be some known issues with fractional units in CSS Grid. Is there a specific workaround or best practice for ensuring proper layout across different browsers while retaining the flexibility of fractional units? How would you solve this? Any feedback is welcome! I'm developing on Windows 11 with Css. Am I approaching this the right way? My team is using Css for this microservice. I'd be grateful for any help. I'm using Css stable in this project. How would you solve this?