月: 2023年10月

投稿日:

CSS Subgrid で孫要素の行の高さを揃える

まずは通常の “親 > 子” の Subgrid の例。
.item に subgrid を指定することで .item 内の行の高さを揃えることができる。

<div class="container">
  <div class="item">
    <div class="item-media"><img src="imgPath"></div>
    <div class="item-title">タイトル</div>
    <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
    <div class="item-paragraph">テキスト</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  …
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.

次に “親 > 子 > 孫” の場合

<div class="container">
  <div class="item">
    <div class="item-inner">
      <div class="item-media"><img src="imgPath"></div>
      <div class="item-title">タイトル</div>
      <div class="item-description">美しい風景と自然に触れる冒険に出かけましょう。説明文</div>
      <div class="item-paragraph">テキスト</div>
    </div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  <div class="item">
    <div class="item-inner"></div>
  </div>
  …
</div>

というケース。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
}
.item-inner {
  display: inherit;
  grid-template-rows: inherit;
  grid-row: inherit;
}

.item-inner で .item の display, grid-template-rows, grid-row を継承することで孫要素内の行の高さを揃えることができる。

See the Pen CSS Subgrid by sho doi (@sho_doi) on CodePen.