👀 Views: 128 💬 Answers: 1 📅 Created: 2025-06-05

css grid chrome CSS

I tried several approaches but none seem to work. I'm having trouble with my CSS Grid layout where the row heights behave inconsistently across different viewport sizes in Chrome. I'm using grid-template-rows to define specific heights for my rows, but when the viewport width changes, the row heights seem to collapse or expand unexpectedly, causing content to overlap. Here's a small snippet of my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px auto 200px; gap: 10px; } .item { background-color: lightblue; } ``` When I inspect the grid in the Chrome DevTools, I see that the second row, which should be flexible (auto), doesn't seem to expand to accommodate the content on smaller screens. Instead, it shrinks down, making it hard to read the text. On Firefox, everything looks perfect. I've tried adding min-height to the items in the second row to see if that helps: ```css .item { min-height: 50px; } ``` But that didn't change the behavior. I've also cleared my cache and tested in incognito mode, yet the scenario continues. I’m on Chrome version 117.0.5938.92. Has anyone else faced a similar scenario, or is there a workaround to ensure consistent row heights across all viewports? Any help would be appreciated! I'm working on a API that needs to handle this. Am I missing something obvious? I recently upgraded to Css latest.