CSS Grid: Items Not Resizing Correctly When Adding New Rows Dynamically
I need some guidance on I'm stuck on something that should probably be simple. Quick question that's been bugging me - I'm working on a project and hit a roadblock... I'm working on a CSS Grid layout in a Vue 3 application, and I've run into an scenario where newly added grid items are not resizing correctly. Initially, my grid is set up with three columns, and I'm using `grid-template-columns: repeat(3, 1fr);`. However, when I dynamically add items to the grid, especially after the third item, the new items seem to be overflowing beyond the grid container instead of wrapping to the next row. I've checked that there’s enough height in the grid container, and I'm applying `overflow: hidden;` to prevent any overflow from displaying. Here’s a simplified version of my grid CSS: ```css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow: hidden; } .grid-item { background-color: lightblue; padding: 20px; border: 1px solid #333; } ``` In my Vue component, I'm using a data property to hold the items, and I update that array with a new item when a button is clicked: ```javascript export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'] }; }, methods: { addItem() { this.items.push(`Item ${this.items.length + 1}`); } } }; ``` The grid behaves correctly up until I hit the fourth item. At that point, instead of wrapping to a new row, it just stretches the grid. I've tried to use `grid-auto-rows: auto;`, but it did not resolve the scenario. I’m not seeing any console errors either. Could it be that the container size is not updating correctly, or is there something else at play? Any insights would be appreciated! This is part of a larger web app I'm building. I'm working on a service that needs to handle this. How would you solve this? My development environment is Windows. Thanks in advance! This is my first time working with Javascript 3.9. Am I approaching this the right way?