👀 Views: 23 💬 Answers: 1 📅 Created: 2025-06-16

css grid firefox CSS

I'm dealing with I'm testing a new approach and I'm working with an scenario where my CSS grid layout is rendering differently in Firefox compared to Chrome. I'm using a simple grid setup with three columns and trying to center the items both vertically and horizontally. In Chrome, everything looks perfect, but in Firefox, the items are not aligning as expected. Here’s the relevant CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center; justify-items: center; height: 100vh; } .item { background: lightblue; padding: 20px; border: 1px solid blue; } ``` Here’s the HTML structure I’m using: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` In Firefox, the items seem to be pushed down, and I’ve even checked the developer tools to see if there are any inherited styles affecting this layout. I’ve also made sure that my Firefox version is up to date (currently 93.0). I thought it might be a browser-specific scenario with grid, but I can’t find any documentation on this behavior. Has anyone else encountered this question or have suggestions on how to resolve this? I've cleared the cache and even tried running Firefox in safe mode, but the scenario continues. I'm working on a application that needs to handle this. Any help would be greatly appreciated! I'm coming from a different tech stack and learning Css. Has anyone dealt with something similar?