エクセルやスプレッドシートで悪手と言われているセル結合。しかし表の見せ方としてはやはり重要度の高い表現でもあり、HTML/CSS上でもその表現は用いたいときもある。
また、表というは本来データの繰り返しを2軸で表すことで、俯瞰的に情報の確認をしやすくするものであり、その繰り返しこそに真価があると思う。

例えば下記のような表を作りたいとする。
3人のなにかの点数が表として並べれている。点数が記録されているものは「国語」と「算数」の２つで、この２つが3人分繰り返されているのだ。

昔ながらの手法（テーブルレイアウト）

これをたとえば昔なつかしのテーブルでレイアウトすると下記のようになる。
余談だが、 これは表として用いているので、Tableタグを使うこと自体は何も間違いではない。

// slim tempalte
table
  tr
    th(rowspan="2")
      |Aさん
    td 国語
    td 80点
  tr
    td 算数
    td 72点
  tr
    th(rowspan="2")
      |Bさん
    td 国語
    td 42点
  tr
    td 算数
    td 60点
  tr
    th(rowspan="2")
      |Cさん
    td 国語
    td 9999点
  tr
    td 算数
    td 0点

あとはこれをCSSでデコレーションしてあげれば完成である。
完成ではあるのだが、これはちょっとした問題が含まれている。
それはレイアウトの変更に弱いという点。昨今のマルチデバイス対応を考えると、具体的には大きな表をスマホで表示させたい際には勝手が悪いのだ。
できることなら、ulやdlタグを用いてCSSでレイアウトしたい。そこで用いられるのが display: grid; である

gridレイアウトでの表現方法

display: grid; は、スプレッドシートのような整列したセル内に配置するように、子要素を配置できるとても画期的なレイアウトシステムである。
これにより、昔Tableタグで行われていたレイアウトシステムを、HTML側でのドキュメントの構造を崩すことなく利用できるようになった。
ただ、 display: grid; は、行単位もしくは列単位での繰り返しに用いるためのプロパティは用意されているのだが、繰り返しパターンを設定してそれを繰り返すみたいな、上記の「国語と算数の点数を持つ表を人毎に繰り返したい」とするためのプロパティは用意されていない。下記のHTMLをそのまま rowspanを含む 2x3 のテーブルの繰り返しにする方法がないのである。やはりレイアウトのためのCSSであって、表組みには用いるのは無理なのか…
と、思ったのだが、ちょっとしたパズルを解く感覚でdisplay: grid;の設定を調整すると、無事実現できることがわかった。
それが下記である。

dl.grid
  .group
    dt.name Aさん
    dd.subject 国語
    dd.point 80点
    dd.subject 算数
    dd.point 72点
  .group
    dt.name Bさん
    dd.subject 国語
    dd.point 42点
    dd.subject 算数
    dd.point 60点
  .group
    dt.name Cさん
    dd.subject 国語
    dd.point 9999点
    dd.subject 算数
    dd.point 0点

.grid
  display: grid
  grid-tempate-columns: 1fr 1fr 1fr
  grid-tempalte-rows: 1fr 1fr
.group
  // ↓ 読みやすさのために包んでいるだけなので、 gridレイアウトの対象からはずす
  display: contents
.name
  grid-column: 1
  grid-row: auto / span 2
  // ↑ grid-row のスタートを auto にして自動流し込み位置に依存させることで、
  border: 1px solid #333
.subject
  border: 1px solid #333
  margin: 0
.point
  border: 1px solid #333
  margin: 0

大事なのは、 .name の grid-row を auto / span 2 にすることだけである。
span 2 は、「縦に2マス、セル結合してください」という意味になるのだが、MDNなどを確認しても「指定された開始番号の位置から、2マス結合します」みたいな使用例しかなく、流し込み位置から縦2マス結合する方法がわからなかったのだが、普通にautoでそれが実現できた。
上記コードを実装し、ブラウザで表示したものが下記になる。
あとはテーブルのときと同様に、CSSを追加してデコレーションしてあげれば良い。