👀 Views: 25 💬 Answers: 1 📅 Created: 2025-06-10

css css-grid react CSS

I'm working on a React application where I'm trying to create a responsive layout with CSS Grid. My grid items are supposed to adjust their size based on the screen width, but I'm working with issues when using the `minmax()` function. Specifically, some items are overlapping or not aligning as expected in smaller viewports. Here’s a snippet of my CSS: ```css .container { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 10px; } .item { background-color: lightblue; padding: 20px; border: 1px solid #333; } ``` I have also tried adjusting the `minmax()` values, but it doesn't seem to help. When I resize the window to below 600px, some items stack awkwardly instead of maintaining a uniform grid layout. I'm using React 17.0.2 along with CSS Modules. I’ve checked the browser compatibility, and it seems like `minmax()` should work correctly in most modern browsers. However, I am seeing unexpected behavior in Chrome 95 where the third item in the third row overlaps the first item on smaller screens. I've also tried using `grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));` but that didn't work either. Any insights into what might be going wrong or how to ensure that grid items align properly would be greatly appreciated. For context: I'm using Css on Windows. Has anyone dealt with something similar?