スクリーン幅いっぱいに正方形を敷き詰める

grid-template-columns: で repeat(10,10%); を使う。因みに「grid-auto-rows: 10vw;」を「.container」に付け加えると縦方向が微妙に伸張する。グリッドアイテムに「padding-bottom: 100%;」を与えて正方形にした。

<div class="container">
  <div class="square">
    <div class="square-content">
    </div>
  </div>
  <!-- 省略 -->
  <div class="square">
    <div class="square-content">
    </div>
  </div>
</div>

.container{
  display: grid;
  grid-template-columns: repeat(10,10%);
}
.square {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}