如何在div中使高度和宽度相等？

Question

我使用div创建了网格。我已经使div表现为表格。我已经制作了4个宽度为50vh的网格。我希望高度适应这些宽度。 大多数分辨率将与这些代码一起使用，但移动设备的高度差异很大。我希望这个网格是平等的！

#grids-container {
  display: table;
}
#grids-row {
  display: row;
}
#grid-1-1,
#grid-1-2,
#grid-1-3,
#grid-1-4 {
  display: table-cell;
  width: 50vh;
  height: 50vh;
  border: 1px solid black;
}
#grid-2-1,
#grid-2-2,
#grid-2-3,
#grid-2-4 {
  display: table-cell;
  width: 50vh;
  height: 50vh;
  border: 1px solid black;
}

<div id="grids-container">
  <div class="grids-row">

    <div id="grid-1-1">
      dsfdsfds
    </div>

    <div id="grid-1-2">
      dsfdsfds
    </div>

    <div id="grid-1-3">
      dsfdsfds
    </div>

    <div id="grid-1-4">
      dsfdsfds
    </div>
  </div>

  <div class="grids-row">

    <div id="grid-2-1">
      dsfdsfds
    </div>

    <div id="grid-2-2">
      dsfdsfds
    </div>

    <div id="grid-2-3">
      dsfdsfds
    </div>

    <div id="grid-2-4">
      dsfdsfds
    </div>
  </div>

</div>