CSS Grid Not Aligning Items as Expected in React App with Styled Components
I've looked through the documentation and I'm still confused about I'm having trouble getting my CSS Grid layout to align items correctly in my React app using Styled Components. I expected my grid items to center align both vertically and horizontally, but they're stacking at the start of the grid instead. Here’s the relevant part of my code: ```javascript import styled from 'styled-components'; const GridContainer = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); justify-items: center; align-items: center; height: 100vh; `; const GridItem = styled.div` background: lightblue; border: 1px solid blue; width: 80%; height: 80%; `; const MyComponent = () => { return ( <GridContainer> <GridItem>Item 1</GridItem> <GridItem>Item 2</GridItem> <GridItem>Item 3</GridItem> </GridContainer> ); }; ``` The `justify-items` and `align-items` properties are supposed to center the grid items, yet they appear in the top-left corner of the grid. I've double-checked that the version of Styled Components I’m using is 5.3.0 and my browser supports CSS Grid well. I also ensured that the `GridContainer` is indeed being rendered properly as a grid with `display: grid;`. I’ve tried adding a fixed height to the `GridContainer`, and even setting `grid-template-areas`, but nothing seems to resolve the scenario. I’m not seeing any console errors, so I’m really stumped. Has anyone experienced something similar, or does anyone have suggestions for what I might be missing here? My development environment is Ubuntu. Thanks in advance! This is part of a larger web app I'm building. What would be the recommended way to handle this? The stack includes Javascript and several other technologies.