CSS：画面にぴったり収まる碁盤の目を作りたい

こういうものを作りたい：

• 画面にぴったり収まってほしい（background-sizeのcontainみたいな）
• 画面が横長なら縦の余白がゼロ、縦長なら横の余白がゼロ
• 画面リサイズに応じてこちらもサイズが変わる

作ったもの：

See the Pen
Square grid by Yu Watanabe (@yuw27b)
on CodePen.

---

まず碁盤の目を作る

とりあえず200px四方の3×3マスで。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
<!--省略-->
  <div class="item">9</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  align-content: center;
  justify-content: center;
}
.item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.item:nth-child(odd) {
  background-color: pink;
}
.item:nth-child(even) {
  background-color: seagreen;
}

gridを画面いっぱいにする

.container {
  display: grid;
  grid-template-columns: repeat(3, min(calc(100vh/3), calc(100vw/3)));
  grid-template-rows: repeat(3, min(calc(100vh/3), calc(100vw/3)));
  align-content: center;
  justify-content: center;
}

3重括弧で読みにくいですが、画面幅の1/3と画面高さの1/3のうち、短いほうをマスの辺の長さにしています。
これで画面をリサイズしても、縦長でも横長でも、画面に収まる最大サイズの正方形になります。

マスの数をHTML側に書いておきたい

<div class="container" style="{--items: 5}">
  <div class="item">1</div>
  <div class="item">2</div>
<!--略-->
  <div class="item">25</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  grid-template-rows: repeat(var(--items), min(calc(100vh/var(--items)), calc(100vw/var(--items))));
  align-content: center;
  justify-content: center;
}

数が変わってもHTMLだけ変更すればOK。
※CSSの変数はIE以外であれば問題なく使えます：Can I use... Support tables for HTML5, CSS3, etc

Sassで書く場合

.container {
  display: grid;
  grid-template-columns: repeat(var(--items), unquote("min(calc(100vh/var(--items)), calc(100vw/var(--items)))"));
  grid-template-rows: repeat(var(--items), unquote("min(calc(100vh/var(--items)), calc(100vw/var(--items)))"));
  align-content: center;
  justify-content: center;
}

そのままでは、min()を、CSSの関数ではなくSassの関数と認識してしまうため、unquote("")で囲みます。

---

数年前だったら、JavaScriptでウィンドウのリサイズイベントを監視して、マス目のサイズを変更していたところですが、CSSに変数や比較関数などが実装されて、CSSのみでやりたいことができてしまいました。
括弧だらけでコードが読みにくいので、適宜コメントなども入れておくと良さそうです。