I'm working with a CSS grid that contains a varying number of elements. Here's an example:
<Box className={classes.Grid}>
<Button variant="outlined">1</Button>
<Button variant="outlined">2</Button>
<Button variant="outlined">3</Button>
<Button variant="outlined">4</Button>
<Button variant="outlined">5</Button>
<Button variant="outlined">6</Button>
<Button variant="outlined">7</Button>
<Button variant="outlined">8</Button>
<Button variant="outlined">9</Button>
<Button variant="outlined">10</Button>
</Box>
In addition,
const useStyles = makeStyles({
Grid: {
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gridGap: "10px",
margin: "auto",
width: "90vw",
}
});
My question is how can I adjust the number of columns in each row based on the size of the grid element? It's worth noting that each child element has specific dimensions (220px by 200px).