Tech

【CSS】Gridレイアウトでカードの高さを全行きれいに揃える方法

公開
Tech HTML/CSS

はじめに

Webサイトの制作でカード型のUIを並べる際、CSSのdisplay: gridは非常に便利ですよね！
しかし、中のテキスト量が違うせいで、特定のカードだけ高さが変わってしまい、デザインが不揃いになってしまった…という経験はありませんか？
今回は、そんなCSS Gridでの不揃い問題を、数行のCSSで解決するTipsをご紹介します。

課題：テキスト量によってカードの高さがバラバラに…

例えば、以下のようにカードを2列（grid-template-columns: 1fr 1fr;）で並べているとします。

image.png

一見きれいに並んでいるように見えますが、2行目左のカードのテキスト量が多いため、上の行よりも高さが伸びてしまっています。

HTML
親要素（Gridコンテナ）の中に、複数のカード（子要素）が入っているシンプルな構成です。

  <!-- 親要素（Gridコンテナ） -->
  <ul class="product__cards">

    <!-- 子要素（カード） -->
    <li class="product__card">
      <a href="#">
        <img src="https://placehold.jp/150x150.png" alt="" class="card-icon">
        <span class="card-text">ダミーテキスト</span>
        <span class="card-arrow">→</span>
      </a>
    </li>

    <li class="product__card">
      <a href="#">
        <img src="https://placehold.jp/150x150.png" alt="" class="card-icon">
        <span class="card-text">ダミーテキスト</span>
        <span class="card-arrow">→</span>
      </a>
    </li>

    <!-- テキストが2行になるカード（高さが伸びる原因） -->
    <li class="product__card">
      <a href="#">
        <img src="https://placehold.jp/150x150.png" alt="" class="card-icon">
        <span class="card-text">ダミーテキストが長い場合のサンプル<br>ダミーテキストが長い場合のサンプル
          <br>ダミーテキストが長い場合のサンプル</span>
        <span class="card-arrow">→</span>
      </a>
    </li>

    <li class="product__card">
      <a href="#">
        <img src="https://placehold.jp/150x150.png" alt="" class="card-icon">
        <span class="card-text">ダミーテキスト</span>
        <span class="card-arrow">→</span>
      </a>
    </li>

  </ul>

解決策：grid-auto-rows: 1fr; を追加するだけ！

親要素である .product__cards に grid-auto-rows: 1fr;を追加するだけでこの問題は解決します。

CSS

.product__cards {
  list-style: none;
  padding: 0;
  width: 100%;
  display: grid; /* Gridレイアウトを指定 */
  grid-template-columns: 1fr 1fr; /* 2列に並べる */
  gap: 20px;
  /* ↓ これを追加！ ↓ */
  grid-auto-rows: 1fr;
}

なぜこれで揃うのか

grid-auto-rows プロパティは、明示的にサイズが指定されていない行の高さを指定するものです。
ここに 1frを指定することで、「すべての行の高さを均等な割合にする」という指示になります。

その結果、最も中身が多くて高さがあるカードの行に合わせて、すべての行の高さが強制的に同じサイズに統一されます。

注意点：子要素の高さ指定を忘れずに！

親要素側の設定で行の高さを揃えても、実はそれだけではカード自体の見た目は伸びてくれません。
親要素で確保された行の高さに合わせて、子要素（カード自体）をいっぱいに広げるために、子要素に height: 100%; を指定することを忘れないようにしましょう

CSS

/* 子要素（カードの枠となる要素）のCSS */
.product__card {
  height: 100%; /* 親の高さ（行の高さ）に合わせて広げる */
}

/* リンク要素も広げてデザインを整える */
.product__card a {
  display: flex;
  align-items: center; /* アイテムを中央揃え */
  height: 100%; /* ここにも指定して領域全体をクリック可能に */
  
  /* 以下、見た目の調整（枠線や背景色など） */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: #333;
}

.card-icon {
  width: 60px;
  height: auto;
  margin-right: 16px;
}

.card-text {
  flex-grow: 1;
  font-weight: bold;
  color: #333;
}
image.png

おわりに

CSS Gridはとても便利ですが、意図した通りに要素を配置するにはプロパティの仕様を少し理解しておく必要があります。
「Gridで並べたカードの高さを揃えたい！」という時は、ぜひこのgrid-auto-rows: 1fr;＋ 子要素の height: 100%; の組み合わせを試してみてください。