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

Question

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.

Answer 1

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