CSS Gridでよく使うプロパティを一覧にして解説する

CSS Gridは、ウェブページを行と列の格子で組み立てるレイアウト機能です。Flexboxが一方向の配置を得意とするのに対し、Gridは縦横を同時に扱えるため、カード一覧や管理画面、複雑なページ構成にも向いています。

この記事では、実装で登場することの多いCSS Gridのプロパティを、グリッドコンテナとグリッドアイテムに分けて整理します。デザインカンプをコードへ置き換えるときや、スマートフォン対応を考えるときにも使いやすい内容です。

グリッドレイアウトの基本

親要素にdisplay: grid;を指定すると、その要素はグリッドコンテナになります。直下の子要素はグリッドアイテムとして扱われ、行と列に沿って配置できるようになります。

.container {
  display: grid;
}

初期状態では、アイテムは自動的に縦方向へ並びます。まず親要素をGrid化し、次に列数や間隔を指定するという順番で考えると、レイアウトの意図を整理しやすくなります。

列と行を定義するプロパティ

grid-template-columnsは列の数と幅を定義します。たとえば、2列を均等にするなら次のように書けます。

.container {
  grid-template-columns: 1fr 1fr;
}

grid-template-rowsは行の高さを指定するプロパティです。autoで内容に合わせたり、100px 200pxのように固定値を使ったりできます。frは余ったスペースを分配する単位なので、画面幅に応じたレイアウトを作る際に便利です。

repeatとminmaxの使い方

同じ幅の列を複数作る場合は、repeat()を使うと記述を短くできます。3列のカードレイアウトなら、repeat(3, 1fr)で表現できます。

.cards {
  grid-template-columns: repeat(3, 1fr);
}

minmax()を組み合わせると、列の最小幅と最大幅を指定できます。repeat(auto-fit, minmax(240px, 1fr))と書けば、カードが収まる範囲で列数が自動調整されます。ブレイクポイントを増やさずにレスポンシブ対応しやすい方法です。

アイテムの配置範囲を指定する

特定のアイテムを複数列にまたがって表示したい場合は、grid-columnを使います。grid-column: span 2;なら、現在の位置から2列分の幅を占有します。

行方向にはgrid-rowを使います。開始線と終了線を指定するgrid-column: 1 / 3;のような書き方もあり、レイアウト上で大きなメインビジュアルやサイドバーを配置するときに役立ちます。

.feature {
  grid-column: 1 / 3;
}

gapで余白を整える

グリッドアイテム同士の間隔は、gapでまとめて指定できます。gap: 24px;なら行と列の両方に24pxの余白が入ります。

行と列で異なる値にしたいときは、row-gapとcolumn-gapを使います。余白の指定をアイテム側のmarginに任せるより、Grid全体のリズムを管理しやすくなります。ポートフォリオの作品一覧や、木製ケースの紹介のような商品情報をカードで並べる場面にも適しています。

配置を調整するプロパティ

justify-itemsは各アイテムの横方向、align-itemsは縦方向の位置を調整します。中央揃えにするなら、それぞれcenterを指定します。

コンテナ全体を調整する場合はjustify-contentとalign-contentを使います。space-betweenやcenterなどの値によって、グリッド全体の余白と位置を変更できます。アイテム単体だけを動かすなら、justify-selfやalign-selfが便利です。

自動配置と順番を制御する

Gridは、アイテムをソースコードの順番に従って自動配置します。grid-auto-flow: column;を使うと、列方向へ流し込む動作に変更できます。

自動生成された行や列のサイズは、grid-auto-rowsとgrid-auto-columnsで設定できます。画面幅が変化して想定より多くのアイテムが増える場合にも、サイズを一定のルールで管理できます。

レスポンシブ対応での実践

スマートフォンでは1列、タブレット以上では2列という構成なら、メディアクエリでgrid-template-columnsを切り替えます。ただし、内容の最小幅が決まっているカードでは、auto-fitとminmax()の組み合わせがより柔軟です。

実際の制作では、プロパティを暗記するより、親要素に列・行・間隔を設定し、必要なアイテムだけ配置範囲を上書きする流れを覚えるのが近道です。勉強会や発表資料を作る際も、実装を振り返る記事のように試行錯誤を記録しておくと、後から設計意図を確認できます。

まずはカード一覧をdisplay: gridとgapで組み、repeat()、minmax()、grid-columnを少しずつ加えてみてください。ブラウザの開発者ツールで列線と余白を確認しながら実装すれば、CSS Gridの特徴を実感しつつ、再利用しやすいレイアウトへ育てられます。