👀 Views: 58 💬 Answers: 1 📅 Created: 2025-08-20

css grid firefox

I'm reviewing some code and I've been struggling with this for a few days now and could really use some help... This might be a silly question, but I'm having trouble getting my CSS Grid layout to align items correctly when using fractional units in Firefox... I have a simple grid setup where I want to create a 3-column layout, but it seems that the items are misaligned, particularly in Firefox 118. Here’s the CSS I'm using: ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 1200px; margin: 0 auto; } .grid-item { background-color: #f0f0f0; padding: 20px; text-align: center; border: 1px solid #ccc; } ``` The HTML structure is as follows: ```html <div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> </div> ``` In Chrome and Edge, this layout works perfectly, and the items align as expected. However, in Firefox, the last item in the row is not properly aligned to the bottom of the grid cell. Instead, it appears to be slightly offset. I've tried adjusting the `align-items` property to `start`, `end`, and `stretch`, but it doesn't seem to fix the issue. Additionally, I've checked for any CSS resets that might be affecting the layout but didn’t find anything. I even attempted to force a minimum height on the grid items, but that also didn’t help. Is there any known issue with CSS Grid and fractional units in the latest version of Firefox? Any insights or potential workarounds would be greatly appreciated! My development environment is macOS. This is for a service running on Ubuntu 20.04. I'm using Css 3.9 in this project. Thanks, I really appreciate it! For context: I'm using Css on Ubuntu 22.04. I'm developing on Ubuntu 20.04 with Css.