CODEWITHSUNDEEP
cssreactjsmaterial-ui
tamuhey
tamuhey

Reputation: 3525

How to set the height of a Material-UI's Grid item equals to its width responsively?

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.

Upvotes: 4

Views: 8742

Answers (2)

Prabesh Gouli
Prabesh Gouli

Reputation: 423

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>
  );
}

Upvotes: 1

Robert Cooper
Robert Cooper

Reputation: 2230

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

Upvotes: 4

Related Questions