Vertical Alignment implementing CSS Grid and Dynamic Content Height in Firefox 117
I'm working on a project and hit a roadblock. I'm working with a frustrating scenario with vertical alignment when using CSS Grid to lay out items that have dynamic content heights. On Firefox 117, I'm trying to center items vertically within a grid cell, but it's not working as expected. I have a grid container set up like this: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 10px; height: 100vh; } ``` Each grid item should be centered both horizontally and vertically. I've tried using `align-items: center;` on the container, but it doesn't seem to affect items with variable heights. Here's how I'm currently styling my grid items: ```css .item { display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; padding: 20px; } ``` The scenario arises specifically when the content within the grid items exceeds a certain height. For example, when one item has significantly more text than others, the vertical centering breaks down. Instead of being centered, it pushes the other items down, leading to uneven spacing. I also attempted using `align-self: center;` on individual grid items, but that didn't resolve the question either. I've checked the browser's inspector, and the computed styles show the necessary properties are applied, but the alignment still isn't working properly. Interestingly, this scenario doesn't occur in Chrome and Edge, where the items align correctly regardless of content height. I've cleared caches and tried disabling extensions, but nothing seems to work. Is there something specific to Firefox that I might be missing, or is there a workaround for this scenario? Any insights would be appreciated! For context: I'm using Css on Windows. Any help would be greatly appreciated!