I want to make my grid items to be square, e.g. the height of the item equals to is width:
const App = ({ width, items }) => (
<Grid container>
{items.map((v) => (
<Grid item md={width}> // I want to make this Grid to be square
v
</Grid>
))}
</Grid>
);
How to do that?
note: width is not fixed.
Personally, I would try to use CSS Grid for this layout, but if you want to use the Material UI Grid components, I believe you would have to do something with paddingBottom: '100%' and some tricks with absolute position.
Here's an example: https://codesandbox.io/s/stack-overflow-square-grid-using-mui-cy4p5
According to material ui grid
you can achieve square box easily, Do check below snippets
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
height: 100,
width: 100,
},
control: {
padding: theme.spacing(2),
},
}));
export default function SpacingGrid() {
const [spacing, setSpacing] = React.useState(2);
const classes = useStyles();
const handleChange = (event) => {
setSpacing(Number(event.target.value));
};
return (
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<Grid container justify="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value} item>
<Paper className={classes.paper} />
</Grid>
))}
</Grid>
</Grid>
<Grid item xs={12}>
<Paper className={classes.control}>
<Grid container>
<Grid item>
<FormLabel>spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</Grid>
</Grid>
</Paper>
</Grid>
</Grid>
);
}