cssグリッドのsubgridについて理屈が分からないです。

HTML
1<div class="container">
2  <div class="item">
3    <p>吾輩は猫である</p>
4    <p>吾輩は猫である。名前はまだない。</p>
5    <p>夏目漱石</p>
6  </div>
7  <div class="item">
8    <p>羅生門</p>
9    <p>ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。</p>
10    <p>芥川龍之介</p>
11  </div>
12  <div class="item">
13    <p>記憶に残る正月の思い出</p>
14    <p>六つばかりの正月（多分）丁度旅順が陥落し、若かった母が、縁側に走り出、泣きながら「万歳！」と叫んだ時...</p>
15    <p>宮本百合子</p>
16  </div>
17</div>

CSS
1>.container {
2  display: grid;
3  grid-template-columns: repeat(3, 200px);
4  gap: 8px 24px;
5
6  >.item {
7    grid-row: span 3;
8    display: grid;
9    grid-template-rows: subgrid;
10  }
11}

上記を記述すると、各.itemの子要素の高さが揃います。subgridは親要素の行または列の構造を継承させるということは理解しています。.itemにgrid-row: span 3;のみを指定し、開発ツールを確認すると.containerは均等に3等分されています。なのでここで、.itemにgrid-template-rows: subgrid;を指定すると各.itemの子要素の高さは.containerの均等に3等分された行に配置されると思いきや、各.itemの子要素の内容量に応じて高さが揃ったので分からなくなってしまいました。subgridは純粋に親グリッドの構造を継承させるのではないということでしょうか。

yambejp

2025/07/02 08:08 編集

どこか表示が確認できるサイトにアップできませんか？提示されているソースでは挙動が確認できません

行動規範の内容に同意します

回答1件

言葉にするとわかりにくいかもしれませんが、がんばって説明してみます。

一応、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/rsfuv7cy/

前提として、親グリッドについては、以下の初期値が使用されています。

grid-template-rows: none
grid-auto-flow: row;
grid-auto-rows: auto;

まず、サブグリッドがない状態の説明です。

セルの指定としてgrid-row: span 3;が指定されているため、行が3つ不足します。
前述の通り、grid-auto-rows: auto;となっているため、3つの行が高さ自動で追加されます。
この場合、全てのセルがgrid-row: span 3;の指定がされているため、.itemの高さはレイアウトに関与しますが、それぞれの内部コンテンツであるp要素の高さはレイアウトに関与しません。したがって、必要な高さが各行等分に分配されます。

次に、サブグリッドを指定した状態の説明です。

サブグリッドなしと同様に行が3つ不足し、3つの行が高さ自動で追加されます。
この場合、セルがサブグリッドを持っているため、子グリッドのそれぞれのコンテンツであるp要素の高さがレイアウトに関与します。そのため、コンテンツの高さに合わせて行の高さが調整される、ということです。

以上のことをわかりやすく確認するには、親グリッドにgrid-auto-rows: 10px;などと指定してみることです。

誤解を恐れずに言えば、「subgridは純粋に親グリッドの構造を継承させる」のですが、autoなどのサイズの決定が必要になる値の場合には、それを再計算する、ということです。というか、そもそもそれがサブグリッドの目的であったりします。

サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。
サブグリッドの利用｜サブグリッド - CSS: カスケーディングスタイルシート | MDN

投稿2025/07/02 09:09

編集2025/07/03 04:46