CSSグリッドの実際の使い方フレームワークなしでの便利なレイアウト

掲載日 2026年4月27日

フレックスボックスかグリッドか？両方を使う。フレックスボックスは1軸（行）を扱う。 または CSSグリッドは両軸を同時に扱う。この違いが、あなたが取るすべてのレイアウトの決定を導く。

実際に重要なプロパティ

あなたが遭遇するほぼすべてのレイアウトを、5つのプロパティで構築できます。 grid-template-columns, grid-template-rows, gap, grid-areaと、 place-itemsここでは、6行で中心に配置されたカードを示します。

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center は、以下のプロパティのショートハンドです。 align-items + justify-items1行で完璧に中央に配置されたコンテンツ。計算は不要です。

fr単位：パーセンテージを思い出すな

パーセンテージはギャップのスペースを考慮しません。 fr (fractional unit) は、固定値が配置された後の残りのスペースを分配します。 残りの スペースを分配します。これは標準12列のグリッドです：

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

各 1fr は、ギャップを引いた後の残りのスペースに等しく分配されます。3列の repeat(3, 1fr) は、容器を越えることはありません——何かがギャップに関連して間違えることがあります。 33.33% 自動埋め込みと自動フィット：メディアクエリなしのレスポンシブグリッド

どちらのキーワードも、ブラウザがどのくらいの列が収まるかを決定します。アイテムがグリッドの容量を下回る場合、違いが現れます。

自動埋め込み

空の列トラックを保持します。 自動フィット それらを縮小し、既存のアイテムが行を埋めるようにします。カードグリッドでは、ほぼ常に を選びます。 auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

これは完全にレスポンシブなカードグリッドです。ブレークポイントは不要です。各カードは少なくとも280px幅で、ブラウザが可能な限り行に並べます。ビューの幅が280px未満になると、1列に変更されます。必要であれば auto-fit を使用して、幅の大きい画面で3つのカードがそれぞれ行を埋め、固定幅の列に空きスペースを残さないようにします。

この種のレイアウトを手動でプロトタイピングするのは時間がかかります。オンラインの CSSグリッドジェネレーターは、コードを書く前に列、行、ギャップを視覚的に設定できます。これは、列計算のデバッグに2分の時間を節約する価値があります。

名前付きエリア：読みやすいレイアウト

グリッドエリアは、数値の操作から読みやすい名前へと置き換えます。最も明確な例は、ヘッダー、サイドバー、メインコンテンツ、フッターのレイアウトです。

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

の grid-template-areas 文字列は、あなたのレイアウトの視覚的なマップです。点（.）は空のセルを表します。セクションを名前変更することで、文字列を変更——行番号を再計算する必要はありません。

10行以内の一般的なレイアウト

基本を習得した後、ほとんどの繰り返しパターンはわずか数行で表現できます。

サイドバー＋コンテンツ：

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

一貫した垂直リズムを持つスタックされたセクション：

.page-sections {
  display: grid;
  gap: 4rem;
}

自動折り返しアイコングリッド：

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Chrome DevToolsにおけるグリッドインスペクタ

DevToolsを開き、エレメントパネル内の任意のグリッドコンテナを選択し、要素の grid バッジを確認します。それをクリックすると、グリッドオーバーレイが切り替わり、ページ上に直接列、行、ギャップの視覚的な表示が得られます。

レイアウトパネル（ComputedとStylesの隣）で、オーバーレイが表示する内容を制御できます：行番号、行名、エリア名、およびグリッド境界を越えて延長する線です。レイアウトが破損した場合、オーバーレイを確認しながら行番号を有効にすると、ずれたトラックをすぐに特定できます——Stylesパネルの原始的な値を読むよりもはるかに速いです。 レイアウト パネル grid-column 値を読みます。

実用的な習慣：まずDevToolsで構造を構築し、グリッドが正しいように見えるまで、スタイルシートに値をコミットします。