【CSS Grid】複数カラムの隣り合う行の高さを揃える

2025.4.28

実践と知見

こんにちは。Gaji-Labo の村上です。
複数カラムのテーブルレイアウトを作成する際、「左右の行の高さをきれいに揃えたい」と思ったことはありませんか？
従来は JavaScript で高さを揃える処理を書く必要がありましたが、今は CSS Grid を使えば、シンプルな記述だけで行の高さを揃えることができます。
今回は、CSS Grid を使って複数カラムの隣り合う行の高さを簡単に揃える方法について解説します。

なぜ Grid を利用するのか

従来の table 要素や Flexbox でも複数カラムのレイアウトは実現できますが、「隣り合う行の高さを自動で揃える」ことは意外と難しい課題でした。

たとえば 2 カラムのレイアウトで、左の行は短いテキスト、右のセルは長文や画像などで高さが異なる場合、高さが揃わず見た目が崩れてしまうことがあります。

しかし、 Grid は Flexbox と異なり行と列の両方向を同時に制御できるレイアウトシステムなので、同じ行のセルは自動的に高さが揃います。
また、table 要素よりも柔軟に配置やサイズ調整ができながら、二次元レイアウトの利点も活かせるのです。

実装方法

基本的な 2 カラムの Grid レイアウトは以下のように実装できます。

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(5, auto);
  gap: 0 12px;
}

ポイント解説

grid-auto-flow: column – アイテムを縦方向（列）に配置していく
grid-template-columns: 1fr 1fr – 2 等分する、2 カラムレイアウト
grid-template-rows: repeat(5, auto) – 5 行作成し、各行の高さをコンテンツに合わせる

実用例

<div class="grid-container">
  <dl class="table-row">
    <dt class="table-cell">項目名</dt>
    <dd class="table-cell">短いテキスト</dd>
  </dl>
  <dl class="table-row">
    <dt class="table-cell">項目名</dt>
    <dd class="table-cell">
      長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト
    </dd>
  </dl>
  <dl class="table-row">
    <dt class="table-cell">項目名</dt>
    <dd class="table-cell">短いテキスト</dd>
  </dl>
  <dl class="table-row">
    <dt class="table-cell">項目名</dt>
    <dd class="table-cell">短いテキスト</dd>
  </dl>
  <!-- 省略 -->
  <dl class="table-row">
    <dt class="table-cell">項目名</dt>
    <dd class="table-cell">短いテキスト</dd>
  </dl>
</div>

この HTML に先ほどの CSS を適用すると、5 行 ×2 列のグリッドレイアウトになり、自動的に各行のカードの高さが揃います。

さいごに

CSS Grid を使えば、複数カラムのレイアウトで「隣り合う行の高さを自動で揃える」ことが、シンプルな記述だけで実現できます。
従来の table や Flexbox では難しかった課題も、Grid の二次元レイアウト機能によって簡単に解決でき、見た目も美しく保てます。
今後、複数カラムの整ったレイアウトを作成したい場合は、CSS Grid の活用を検討してみてください。

Gaji-Labo では、従来のやり方に捉われず、課題解決のために最適な方法はないか模索し続け、スタートアップのプロダクト開発や新規事業チームの成長支援を行なっています。
ご興味のある方はお気軽にカジュアル面談をお申し込みください！