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

横方向に並ぶ一列の正方形の数はスクリーンサイズの大きい方から 12 → 10 → 8 → 7 → 3 と変化する

<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(auto-fit, minmax(min(100px, 100%), 1fr));
}

.square {
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.square-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}