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は純粋に親グリッドの構造を継承させるのではないということでしょうか。
