Question

我正在使用ReactJS和Material UI创建一个WebApp，在这个领域我还很陌生。

我正在使用网格和网格项目，它们可以正常工作，但是它们缺少我需要的一项功能：使网格项目的高度和宽度始终保持相同的比率。简而言之-我的网格项（或盒子或其他容器）应始终是正方形，且边长相等。

因此，在大屏幕上，它应该是一个更大的正方形，在小屏幕上，它应该是一个较小的正方形。但是Grid项应始终为正方形，因此width == height。

我尝试使用网格项和网格容器属性，更改了justify和align-items属性。我还尝试过使用 Box 中介容器作为商品，但 Box 本身缺少此属性，无法“使它成为正方形”。

我还更改了 Box 或myItem的宽度，高度，实际上，我可以通过为我的 Box 或网格项，但是它固定了，并且不会随着较大/较小的设备而调整大小。

    <Grid className={classes.root} container spacing={0}  justify = "flex-start" padding= {1} direction = "row"> 
     <Grid item xs={4} >
        <Box >
          <MyItem height = "100%" width= "100%"/>  
        </Box>
      </Grid>

      <Grid item xs={2} >
        <Box >
          <MyItem height = "100%" width= "100%"/>  
        </Box>
      </Grid>

      <Grid item xs={2} >
        <Box >
          <MyItem height = "100%" width= "100%"/>  
        </Box>
      </Grid>
      <Grid item xs={4} >
        <Box >
          <MyItem height = "100%" width= "100%"/>  
        </Box>
      </Grid>
    </Grid>

基本上，我理想/需要的是执行以下操作；

Box width= "100%" height = {this.width}

或

MyItem width= "100%" height = {this.width}

但是截至目前，这将无法获得所需的平方。我怀疑这是因为整个过程的工作方式，this.width使我100％，而parent.width的100％不必与parent.height的100％相同。

如何将“网格项目”（或“盒子”或其他容器）设置为始终为正方形？

0 个答案: