CSS Subgridを使ってみる

先日カードレイアウトの調整で悩んでいたところ、subgridが便利と教えていただきました。知らない機能だったので試してみます。

Subgridとは

入れ子になったグリッド内で、子グリッドから親グリッドのトラックサイズを指定するために使用できる値です。例として、子グリッドの grid-template-rows に subgrid を設定することで、新しいトラックを生成するのではなく、親グリッドのトラックを参照できます。

通常、子グリッドは新しいトラックを生成するため、その中にある要素の高さはボックスの大きさに従います。

grid-template-rows: subgrid なし

カードレイアウトのように、子グリッド内の要素の高さを揃えたい場合は subgrid を使うことができます。親要素のトラックサイズを参照するため、grid-row: span 3 と指定することで親グリッドの3行分のスペースを占有できます。

grid-template-rows: subgrid あり

Subgridを使ってみる

サブグリッドを使ってカードレイアウトをつくってみます。といっても、入れ子にしたグリッドに対して subgrid を指定するだけです。子グリッドの gap は上書きできるので、親グリッドと異なる値を指定しました。

<!-- 親グリッド -->
<div class="grid-container">
  <!-- 子グリッド -->
  <div class="card card--violet">
    <div class="card__header">
      <img
        src="./images/image-daniel.jpg"
        alt="Daniel Clifford"
        class="card__avatar"
      />
      <div class="card__header-inner">
        <h2 class="card__header-name">Daniel Clifford</h2>
        <div class="card__header-description">Verified Graduate</div>
      </div>
    </div>

    <div class="card__title">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
      vitae culpa assumenda corporis deserunt autem voluptatibus quasi.
      Voluptate aliquid quia numquam repudiandae. Nesciunt eos magni
      tenetur eligendi est blanditiis fuga.
    </div>
    <div class="card__body">
      “I was an EMT for many years before I joined the bootcamp. I’ve been
      looking to make a transition and have heard some people who had an
      amazing experience here. I signed up for the free intro course and
      found it incredibly fun! I enrolled shortly thereafter. The next 12
      weeks was the best - and most grueling - time of my life. Since
      completing the course, I’ve successfully switched careers, working
      as a Software Engineer at a VR startup. ”
    </div>
  </div>
</div>

.grid-container {
  display: grid; /* 親グリッド */
  grid-template-columns: repeat(4, minmax(255px, 1fr));
  gap: 24px;
}

.card {
  display: grid; /* 子グリッド */
  grid-template-rows: subgrid; /* 行方向のサブグリッドを指定 */
  grid-row: span 3; /* 親グリッドの3行分を占有 */
  gap: 16px;
}

完成したもの (デザインはFrontend Mentorからお借りしました)

おわりに

CSS Grid Layout Module Level 2でSubgridが追加される前は、このようなレイアウトをつくるのにJavaScriptを使っていたそうです。新しいCSSの記法を知ることで、選択肢の幅が広がると思いました。

https://github.com/yuki-yamamura/testimonials-grid-section-main