yuw27b’s blog

技術メモと雑記

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のみでやりたいことができてしまいました。
括弧だらけでコードが読みにくいので、適宜コメントなども入れておくと良さそうです。