👀 Views: 49 💬 Answers: 1 📅 Created: 2025-06-07

css grid nuxt.js

I'm performance testing and I'm following best practices but I'm facing an issue with CSS Grid where my grid items are overlapping when using the 'auto' placement feature in a Nuxt.js application... I have a simple grid layout defined, but it seems that items are not respecting the defined grid area, especially when the viewport size changes. Here's the relevant part of my CSS: ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 10px; } .grid-item { background-color: lightblue; padding: 20px; border: 1px solid #333; } ``` And the HTML structure looks like this: ```vue <template> <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 class="grid-item">Item 5</div> </div> </template> ``` When I resize the browser, the items seem to overlap instead of stacking correctly. I tried adjusting the `grid-auto-flow` property to `row` and also setting explicit sizes on the grid items, but that hasn't resolved the issue. I'm currently using Nuxt.js version 2.15 and the browser is Chrome version 94. I've checked the developer tools, and I can see that the grid structure is correct, but the layout does not render as expected after resizing. The overlapping starts to occur at widths below 800px. Could this be related to how Nuxt.js handles hydration or the CSS specificity in my components? Any guidance would be appreciated! I'm working with Css in a Docker container on Windows 11. I'd love to hear your thoughts on this. For context: I'm using Css on Ubuntu 22.04.