🃏

【CSS だけ】孫要素の高さを揃える Subgrid

2024/10/09に公開


カードが横並びになったとき、これまで孫要素の高さを揃える方法といえばflex-growがメジャーでした。
flex-growは設定する CSS が多く、書いていると頭がこんがらがってくるのであまり得意ではなかったのですがSubgridでも同じ効果を得られるとのことで、早速試してみます。

コード

結論のコードです。

<div class="l-container">
  <div class="card__list">
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトル<br />カードのタイトル</h2>
      <p>カードのテキストカードのテキストカードのテキストカードのテキスト</p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトル</h2>
      <p>カードのテキスト</p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトルカードのタイトル</h2>
      <p>カードのテキストカードのテキストカードのテキストカードのテキスト</p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトル</h2>
      <p>
        カードのテキストカードのテキストカードのテキストカードカードのテキストカードのテキスト
      </p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトル</h2>
      <p>カードのテキスト</p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
    <div class="card__item">
      <div class="card__image">
        <img src="./img/ebi.png" alt="" width="400" height="396" />
      </div>
      <h2>カードのタイトルカードのタイトル<br />カードのタイトル</h2>
      <p>
        カードのテキストカードカードのテキストカードカードのテキストカードのテキストカードのテキストカードのテキスト
      </p>
      <div class="card__button">
        <a href="" class="card__button--blue">続きを読む</a>
      </div>
    </div>
  </div>
</div>
.l-container {
  max-width: 1200px;
  margin: 100px auto;
}

.card__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 40px;
}

.card__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 20px;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 20px;
}
.card__item h2 {
  font-size: 20px;
  font-weight: bold;
}

.card__image {
  text-align: center;
}
.card__image img {
  width: 100px;
  height: auto;
}

.card__button {
  text-align: center;
}

.card__button--blue {
  font-size: 16px;
  color: #fff;
  width: 100%;
  display: block;
  background-color: skyblue;
  padding: 0.6rem 1.2rem;
  border-radius: 100vw;
  font-weight: bold;
}

HTML の解説

カードを囲むcard__listの中に、カード本体であるcard__itemを入れました。
タイトルやテキストの長さをあえて変えて、孫要素の高さが揃うか試しています。

CSS の解説

カードを囲むcard__listに、3つずつカードが並ぶようgrid-template-columns: repeat(3, 1fr);を指定します。カードとカードの間をgap: 40px;で指定し、隙間を開けました。

カード本体

カード本体にもdisplay: grid;を指定し、高さを揃えるためのgrid-template-rows: subgrid;を指定します。
さらに、何行分の高さを揃えるのかgrid-row: span 4;で指定します。4にした理由は、カードの中身の行数が4だからです。

まとめ

flex-growよりシンプルに孫要素の高さを揃えられました。
カードの高さを揃えるのはよく使うので、これからはSubgridを使っていきます。

Discussion