CSS Grid Not Aligning Items as Expected with Fractional Units and Gaps
I'm working through a tutorial and I'm sure I'm missing something obvious here, but I'm sure I'm missing something obvious here, but I’m working with an scenario where my CSS Grid layout isn’t aligning items correctly when I use fractional units along with gaps... I am using CSS Grid in my project and I've defined a grid with `grid-template-columns: repeat(3, 1fr)` and `gap: 20px`. However, when I try to align items within the grid, they seem to be misaligned, especially when the window resizes. For instance, I expect each item to fill the grid cell completely, but there's an unexpected space appearing around them. Here’s the relevant CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 10px; } .item { background-color: lightblue; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid blue; } ``` And the corresponding HTML structure looks like this: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div> ``` I’ve tried adjusting the `align-items` property to different values like `start`, `end`, and `stretch`, but the misalignment remains. I’m testing this on the latest version of Chrome and also checked it in Firefox, and the scenario continues across both browsers. Is there something I might be missing related to how CSS Grid handles gaps and fractional units? Any insights would be greatly appreciated! Any ideas what could be causing this? I'm working on a CLI tool that needs to handle this. Thanks for taking the time to read this! This issue appeared after updating to Css latest. What are your experiences with this?