How can I make height and width equal in div?

Question

I have created grids using divs. I have made divs to behave as tables.I have made 4 grids of width 50vh. I want height to adapt to these width. Mostly resolutions will work fine with these codes but with mobile there will be huge difference in height. I want this grids to be equal!

#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>