読み込み中...

CSSグリッド入門！作り方と使い方の12ステップ

CSSグリッドの基本構造, CSSグリッドの応用例 CSS
2024.02.04
この記事は約31分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

CSSグリッドは、行と列で要素を配置するCSSレイアウト仕様です。複雑な段組み、カード一覧、ページ構成、レスポンシブな商品一覧を、floatや過度なpositionに頼らず整理できます。

初心者がつまずきやすいのは、display: gridを指定する親要素と子要素の役割を混同する点です。違いを押さえると、CSSグリッドの作り方、使い方、対処法を段階的に理解できます。

公式ドキュメントでは、CSS Grid Layoutは二次元レイアウトを扱う仕様として整理されているのが基本です。仕様の基礎はMDNのCSSグリッドレイアウト、個別プロパティはMDNのgrid-template-columnsで確認できます。

動作確認環境
  • HTML Living Standard / CSS Grid Layout Module
  • Google Chrome 126、Firefox 127、Safari 17.5相当のモダンブラウザ
📖 この記事で学べること
  • CSSグリッドの基本構造とグリッドコンテナの作り方
  • grid-template-columnsとgrid-template-rowsの使い方
  • gap、grid-column、grid-rowによる調整方法
  • レスポンシブ対応、ネスト、テンプレートエリアの応用例
  • 初心者が遭遇しやすい崩れ方と対処法

関連する基礎として、横並びはCSSでInline-blockを効果的に使う方法9選、DOM選択はCSSにおけるquerySelector()の活用法10選！初心者からプロまで役立つCSSガイドが参考になります。装飾はCSSを使った引用デザインの作成とカスタマイズ方法7選、改行制御はCSSのword-breakを完全解説！初心者からプロまでの5つのコード例、割合表示のUIは【CSS】ゲージ作成の完全ガイド！7ステップで完全理解と合わせて整理できます。

CSSグリッド入門

CSSグリッドは「親に格子を作り、子を格子へ流し込む」レイアウト手法です。最小のサンプルコードは、親要素へdisplay: gridを与え、列幅をgrid-template-columnsで決める形です。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

結果: 期待される表示は、子要素が横3列に並び、各列の間に16pxの余白が入る状態です。

この形を起点にすると、CSSグリッドの使い方は整理しやすくなります。列はgrid-template-columns、行はgrid-template-rows、隙間はgap、個別配置はgrid-columnやgrid-rowで調整します。

CSSグリッドとは

CSSグリッドは、横方向と縦方向を同時に扱える二次元レイアウトです。display: flexは一方向の並びを得意とするため、カードの折り返しはFlexbox、ページ全体の領域設計はCSSグリッドという使い分けが一般的です。

ヘッダー、メイン、サイドバー、フッターのような構造もCSSだけで視覚的に組めますし、ここがポイントです。CSSグリッドの作り方を覚えると、widthやmargin-leftを細かく積む場面が減ります。

CSSグリッドの基本構造

基本構造は、親要素のグリッドコンテナと子要素のグリッドアイテムに分かれます。HTMLでは<div>、<section>、<article>などを親にし、CSSでdisplayを切り替えるのが出発点です。

子要素は、親がグリッドコンテナになった時点でグリッドアイテムとして扱われますが、これは押さえたい点です。配置を細かく変える場合は、子側にgrid-area、justify-self、align-selfなどを加えます。

項目主なプロパティ役割使いどころ注意点
コンテナ化display子要素をグリッドアイテム化しますCSSグリッドの起点親要素に書きます
列設定grid-template-columns列数と列幅を決めますカード一覧や段組みfrとpxを混在できます
行設定grid-template-rows行の高さを決めます固定高のパネル内容量に注意します
余白gap行列間の距離を作りますカード間の空きgrid-gapよりgapが現在の書き方です
列またぎgrid-column横方向の占有範囲を変えます注目カードや大きい画像過度な指定は崩れの原因になります
行またぎgrid-row縦方向の占有範囲を変えます縦長カード自動配置との相性を見ます
個別寄せjustify-selfセル内の横位置を変えますボタンやラベル全体指定はjustify-itemsを使います
個別縦寄せalign-selfセル内の縦位置を変えます高さのあるセル全体指定はalign-itemsを使います
自動配置grid-auto-flow流し込み方向を決めます可変件数の一覧denseは視覚順に注意します
最小最大minmax()伸縮範囲を決めますレスポンシブ列auto-fitと組み合わせやすいです

第1ステップ：グリッドコンテナの作成

CSSグリッドの作り方は、親要素をグリッドコンテナにするところから始まります。親要素にdisplay: gridを設定すると、直下の子要素が配置対象になります。

この時点で複雑なプロパティは不要です。初心者は.grid-containerというクラス名を付け、CSS側でdisplayだけを変えると流れをつかみやすくなるのが目安です。

HTMLとCSSの基本

HTMLでは、レイアウトのまとまりにclassを付けます。そのクラスへCSSを適用し、文書の意味と見た目を分けて管理します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <style>
    .grid-container {
      display: grid;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</body>
</html>

結果: 期待される表示は、.grid-container内の2要素がグリッドアイテムとして扱われる状態です。列数をまだ決めていないため、初期状態では通常のブロック要素に近い縦並びになります。

これだけでは見た目の変化が小さい場合があります。ただし、CSSグリッドが有効なため、後からgrid-template-columnsやgapを追加できるのがポイントです。

グリッドコンテナの設定方法

コンテナ化した後は、列、行、余白を加えて実用的な形にします。CSSグリッドの使い方では、repeat()、fr、gapの組み合わせがよく使われます。

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: auto;
  gap: 10px;
}

結果: 期待される表示は、幅50pxの列が3本並び、行の高さは内容に応じて決まり、行列の間に10pxの余白が入る状態です。

この例ではgrid-gapではなくgapを使っているのが一般的です。現在のサンプルコードではgapに寄せると、他のレイアウト仕様とも表記がそろいます。

第2ステップ：グリッドアイテムの配置

グリッドコンテナを作ったら、その中へ子要素を置きます。子要素はグリッドアイテムになり、CSSグリッドの自動配置ルールに従ってセルへ並びますし、これが一つの目安です。

アイテム側に特別な指定を書かなくても配置は始まります。見た目を整える段階で、border、padding、text-alignなどを加える流れが扱いやすいです。

グリッドアイテムの追加方法

グリッドアイテムは、親要素の直下に並ぶ要素です。<div>だけでなく、<li>、<article>、<img>なども対象になります。

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

結果: 期待される表示は、4個の.grid-itemが親要素の中に入り、CSS側のグリッド定義に従って並ぶ状態です。

この段階ではHTMLだけなので、列数はまだ確定しません。CSS側に列定義を足せば、同じHTMLのまま配置を変えられます。

配置の例とサンプルコード

配置はコンテナ側の設定で大きく変わります。サンプルコードでは同じ幅の列を3本作り、アイテムの枠線と内側余白を整えますが、覚えておくと役立つでしょう。

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

.grid-item {
  border: 1px solid black;
  padding: 10px;
  text-align: center;
}

結果: 期待される表示は、3列のグリッドにアイテムが左から右へ入り、4個目が次の行へ回り込む状態です。

CSSグリッドの基本は「HTMLは並べるだけ、CSSで列を作る」という考え方です。初心者の対処法として、崩れた場合は親にdisplay: gridが付いているかを先に確認します。

第3ステップ：グリッドの列と行の設定

CSSグリッドでは、列と行の定義がレイアウトの骨格です。列はgrid-template-columns、行はgrid-template-rowsで決まり、値にはpx、%、fr、autoなどを使えます。

設定を誤ると、列幅が狭すぎたり行の高さが固定されて内容があふれたりするのが現実的です。対処法として、固定値だけで組まず、frやminmax()も検討します。

grid-template-columnsとgrid-template-rowsの使い方

grid-template-columnsは横方向、grid-template-rowsは縦方向のトラックを作ります。3列2行なら、最大6個のセルを持つ明示的なグリッドになると整理できます。

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 150px 150px;
}

結果: 期待される表示は、横に100px、200px、100pxの3列が並び、縦に150pxの行が2本作られる状態です。

固定幅の管理画面やバナー領域では理解しやすい形です。ただし、スマートフォンでは横スクロールの原因になるため、応用例では可変単位を組み合わせます。

列と行の設定例

frは、利用可能な空間を比率で分ける単位です。CSSグリッドの使い方として、同じ幅のカード一覧にはrepeat(3, 1fr)がよく合います。

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

結果: 期待される表示は、利用可能な横幅を3等分した列が作られる状態です。

この指定なら親要素の幅が変わっても列幅が追従すると理解できます。レスポンシブ対応の作り方として、後から@mediaで列数を切り替える構成にもつなげやすいです。

第4ステップ：グリッドギャップの設定

CSSグリッドの余白は、アイテム自体のmarginではなく、コンテナ側のgapで管理できます。カード同士の距離を一括でそろえやすく、余白の重なりも避けやすくなります。

アイテムの内側余白にはpaddingを使いると覚えるとよいでしょう。外側の距離はgap、内側の余白はpaddingと分けると、初心者でも崩れの原因を追いやすいです。

グリッドアイテム間のスペースの調整

gapは、行と列の間隔をまとめて決めます。個別に変える場合はrow-gapとcolumn-gapを使うため、作り方の段階で余白の方向を意識します。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

結果: 期待される表示は、3列の各アイテム間に縦横10pxの余白が入る状態です。

これにより、カード一覧の余白が均一になると考えられます。古い解説で見かけるgrid-gapは互換目的で動く場合がありますが、新しいサンプルコードではgapが自然です。

ギャップの設定方法

行間と列間を分けると、縦方向だけ広く取るデザインを作れます。行ごとのまとまりを強めたい一覧ではrow-gapを大きめにします。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 20px;
  column-gap: 10px;
}

結果: 期待される表示は、行間が20px、列間が10pxとなり、縦方向に余裕のあるグリッドになると言えるでしょう。

この対処法は、画像カードのタイトルが複数行になりやすい一覧で役立ちます。CSSグリッドでは余白をコンテナ単位で管理でき、不要なmargin-bottomを増やさずに済みます。

第5ステップ：グリッドアイテムのサイズ調整

アイテムのサイズ調整では、特定の要素だけを大きく見せる指定が中心です。CSSグリッドでは、grid-columnとgrid-rowで列またぎや行またぎを表現できるのが基本です。

使い方を覚えると、注目記事を大きく表示する応用例や、管理画面のパネル配置へ発展できます。ただし、またぎ指定が増えすぎると保守しづらくなります。

grid-columnとgrid-rowの活用

grid-column: span 2は、アイテムを横2列分に広げますし、ここを基本と考えるとよいでしょう。同様に、grid-row: span 2を使うと縦2行分の領域を占有します。

.featured-item {
  grid-column: span 2;
}

.tall-item {
  grid-row: span 2;
}

結果: 期待される表示は、.featured-itemが横に広がり、.tall-itemが縦に長く表示される状態です。

このサンプルコードは、大きいカードを混ぜたいときの基礎です。狭い画面では列数が足りず崩れる可能性があるため、@mediaでまたぎ指定を解除する対処法も考えます。

サイズ調整の実践例

実践例では、4列のグリッドに4個のアイテムを置き、先頭を横へ広げますし、ここがポイントです。2番目を縦に広げると、CSSグリッドの二次元制御が分かります。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

結果: 期待される表示は、4個のアイテムがグリッドコンテナ内の配置対象として用意される状態です。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-item {
  border: 1px solid black;
  text-align: center;
  padding: 12px;
}

.grid-item:nth-child(1) {
  grid-column: span 2;
}

.grid-item:nth-child(2) {
  grid-row: span 2;
}

結果: 期待される表示は、1番目のアイテムが2列分、2番目のアイテムが2行分の領域を取る状態です。

この応用例では、:nth-child()で特定の順番の要素だけを変えています。HTMLの順番が変わると対象も変わるため、.featuredのような意味のあるクラス名のほうが扱いやすい場面があります。

第6ステップ：グリッドアイテムの位置調整

サイズが決まったら、セル内のどこに置くかを調整するのが目安です。CSSグリッドでは、横方向にjustify-self、縦方向にalign-selfを使い、アイテム単位で位置を変えられます。

これらはセルそのものではなく、セル内でのアイテムの寄せ方を制御します。ボタンだけ右寄せにする、ラベルだけ中央に置くといった使い方に向きますが、これは押さえたい点です。

justify-selfとalign-selfの使い方

justify-selfにはstart、end、center、stretchなどを指定できます。align-selfも同じ値を使えますが、方向は縦方向です。

.item-center {
  justify-self: center;
  align-self: center;
}

.item-end {
  justify-self: end;
  align-self: end;
}

結果: 期待される表示は、.item-centerがセルの中央へ、.item-endがセルの右下寄りへ配置される状態です。

指定が効かない場合は、対象が本当にグリッドアイテムかを確認します。親の直下にない孫要素へ指定している場合、CSSグリッドの配置対象ではありません。

位置調整の具体例

具体例では、3個のアイテムを左、中央、右下へ寄せますし、これが一つの目安です。HTMLはシンプルに保ち、CSSで位置差を作ります。

<div class="grid-container">
  <div class="grid-item item1">アイテム1</div>
  <div class="grid-item item2">アイテム2</div>
  <div class="grid-item item3">アイテム3</div>
</div>

結果: 期待される表示は、3個のアイテムに個別のクラスが付与され、位置調整の対象として分けられる状態です。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-height: 120px;
}

.grid-item {
  border: 1px solid black;
  padding: 8px;
}

.item1 {
  justify-self: start;
}

.item2 {
  align-self: center;
  justify-self: center;
}

.item3 {
  justify-self: end;
  align-self: end;
}

結果: 期待される表示は、1番目が左寄せ、2番目が中央、3番目が右下寄せになる状態です。

この応用例ではmin-heightを入れ、縦方向の違いが見える余地を作っています。縦位置が見えない場合の対処法は、セルの高さを確保することです。

第7ステップ：レスポンシブデザインへの対応

CSSグリッドは、画面幅に応じて列数を変えるレスポンシブデザインと相性がよいレイアウトです。カード一覧では、PCで3列、タブレットで2列、スマートフォンで1列という作り方がよく使われます。

切り替えには@mediaを使いるのがポイントです。固定幅で横スクロールが出る場合の対処法として、ブレークポイントごとにgrid-template-columnsを変更します。

💡 Tips: レスポンシブ対応では、最初に狭い画面向けの1列を作り、広い画面で列数を増やす書き方にすると、CSSの意図を追いやすくなります。

メディアクエリの活用

@mediaは、画面幅や表示条件に応じてCSSを切り替える構文です。CSSグリッドでは、主に列数、余白、またぎ指定を切り替える用途で使いるのが一般的です。

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

結果: 期待される表示は、画面幅が768px以下のときにグリッドが2列へ切り替わる状態です。

この使い方では、通常時の指定と条件内の指定が衝突しないよう順番を確認します。同じセレクタなら後から書いたCSSが優先されるため、カスケードの理解も必要です。

レスポンシブ対応の実例

実例では、通常は3列、768px以下で2列、480px以下で1列に変えます。CSSグリッドの応用例として、商品カード、記事一覧、ギャラリーに使いやすい形です。

<div class="grid-container">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
</div>

結果: 期待される表示は、3個のアイテムが画面幅に応じた列数で並ぶ準備ができる状態です。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

結果: 期待される表示は、広い画面で3列、768px以下で2列、480px以下で1列へ切り替わる状態です。

このサンプルコードでは、列数だけを変えてHTMLを保っています。初心者は、レスポンシブのたびにHTMLを分けるより、CSSでレイアウトを切り替える考え方を先に覚えるとよいです。

第8ステップ：グリッドのネスト

グリッドのネストは、グリッドアイテムの中に別のグリッドコンテナを置く作り方です。親グリッドでページ全体を組み、子グリッドでカード内部や小さな一覧を整えます。

ネストを増やしすぎるとCSSの見通しが悪くなるのが現実的です。親は大きな領域、子は部品内部という役割を決めると管理しやすいです。

ネストされたグリッドの作成

ネストでは、親の直下にある要素が親グリッドのアイテムになります。その要素へさらにdisplay: gridを指定すると、子の中だけで別のCSSグリッドが始まります。

<div class="parent-grid">
  <div class="child-grid">
    <span>A</span>
    <span>B</span>
  </div>
  <div class="child-grid">
    <span>C</span>
    <span>D</span>
  </div>
  <div class="child-grid">
    <span>E</span>
    <span>F</span>
  </div>
</div>

結果: 期待される表示は、親グリッド内に3個の子グリッドが入り、それぞれの内部に2個の要素がある状態です。

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.child-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

結果: 期待される表示は、親側が3列、各子グリッドの内部が2列で並ぶ状態です。

この構造では、親と子のgapを別々に管理できます。子の列幅は親の列幅の影響を受けるため、狭い画面では子内部の文字あふれにも注意します。

ネストグリッドの応用例

ネストの応用例として、ニュースカードの内部に画像、見出し、日付、タグを並べる形があると整理できます。親グリッドはカード一覧、子グリッドはカード内部の情報整理を担当します。

.article-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.article-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
}

結果: 期待される表示は、記事カードが3列で並び、各カード内では画像、本文、補足情報が縦方向に整理される状態です。

この使い方では、ページ全体と部品内部のCSSを分けられます。CSSグリッドを徹底解説するうえで、ネストは責務を分ける設計として理解できると理解できます。

第9ステップ：グリッドテンプレートエリアの利用

grid-template-areasは、レイアウト領域に名前を付けて配置する使い方です。CSSグリッドの中でも、ヘッダー、ナビゲーション、メイン、サイドバー、フッターのようなページ構成を視覚的に書けます。

コードを読んだだけで領域の並びを把握しやすくなります。エリア名の綴りがgrid-areaと一致しない場合は配置されないため、対処法として名前の対応を確認すると覚えるとよいでしょう。

⚠️ 注意: grid-template-areasでは、同じ行の文字列内で列数がそろっている必要があります。行ごとの名前数がずれると、意図したグリッドになりません。

grid-template-areasの説明

名前付きエリアは、引用符で囲んだ文字列として並べます。空白区切りの名前が列を表し、文字列の行がグリッドの行になると考えられます。

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

結果: 期待される表示は、上段にヘッダー、中段にメインとサイドバー、下段にフッターが配置される状態です。

このサンプルコードでは、.headerなどの要素にgrid-areaで名前を結び付けています。初心者が間違えやすいのは、エリア名を変えたのに対応するgrid-areaを直し忘れる点です。

テンプレートエリアの実践例

実践例では、ナビゲーションを左、メインを中央、サイドバーを右に置きます。CSSグリッドの作り方として、ページ全体の設計を文字列で表すため構造が伝わりやすいです。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  gap: 16px;
}

.header {
  grid-area: header;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

結果: 期待される表示は、ヘッダーとフッターが横幅全体を取り、中段にナビゲーション、メイン、サイドバーが並ぶ状態です。

この応用例は、ブログや管理画面の外枠に向いています。スマートフォンでは横3列が窮屈になるため、@mediaでgrid-template-areas自体を書き換えます。

@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
  }
}

結果: 期待される表示は、600px以下の画面で各領域が縦1列に並ぶ状態です。

第10ステップ：グリッドアイテムの順序変更

CSSグリッドでは、orderを使って表示順を変えられます。HTMLの順番を保ったまま見た目だけを変えられるため、レスポンシブな配置変更の対処法として使われます。

ただし、視覚上の順番と読み上げ順がずれる場合があると言えるでしょう。アクセシビリティを考えるなら、意味のある順番はHTML側に置き、orderは補助的に使います。

orderプロパティの説明

orderの初期値は0です。値が小さいアイテムほど先に表示され、値が大きいアイテムほど後ろへ回ります。

.item1 {
  order: 2;
}

.item2 {
  order: 1;
}

.item3 {
  order: 3;
}

結果: 期待される表示は、.item2、.item1、.item3の順に並ぶ状態です。

この使い方は見た目だけの並び替えに向きますが、覚えておくと役立つでしょう。一方、フォームや記事本文のように読み順が意味を持つ領域では、HTMLの順序を優先します。

順序変更の実装例

実装例では、狭い画面でメインを先に見せ、広い画面でサイドバーを横に置きます。CSSグリッドの応用例として、ブログやドキュメントサイトのレイアウトに使われる形です。

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.sidebar {
  order: 2;
}

.main-content {
  order: 1;
}

@media screen and (min-width: 600px) {
  .container {
    grid-template-columns: 2fr 1fr;
  }

  .main-content {
    order: 1;
  }

  .sidebar {
    order: 2;
  }
}

結果: 期待される表示は、狭い画面でメインが先、600px以上でメインとサイドバーが横並びになる状態です。

このサンプルコードでは、読み順と表示順の差を小さく保っています。CSSグリッドを徹底解説するうえで、見た目の自由度だけでなく文書構造との整合も重要です。

第11ステップ：グリッドアイテムの自動配置

自動配置は、置き場所を書いていないアイテムをCSSグリッドが順番に流し込む仕組みです。商品数や記事数が変わる一覧では、すべての位置を手で書かずに済みます。

挙動はgrid-auto-flowで調整できるのが基本です。通常は行方向へ流れますが、列方向や隙間を詰める指定も選べます。

grid-auto-flowの概要

grid-auto-flow: rowは行方向、grid-auto-flow: columnは列方向の自動配置を表します。denseを加えると、空いた領域へ後続アイテムを詰める動きになるのが目安です。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

結果: 期待される表示は、アイテムが左から右へ並び、3列を超えると次の行へ流れる状態です。

この使い方は標準的なカード一覧に向いています。列方向へ流したい特殊なUIでなければ、rowの挙動を理解してからcolumnやdenseへ進みます。

自動配置の応用

denseは空きスペースを埋める配置に寄せる値です。ギャラリーのように高さや横幅が違うカードを詰めたいときの応用例として検討できるのがポイントです。

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
}

.item {
  grid-column: span 2;
}

.item.special {
  grid-column: span 4;
}

結果: 期待される表示は、通常アイテムが2列分、特別なアイテムが4列分を占め、空き領域が可能な範囲で詰められる状態です。

denseは視覚上の順番が変わることがあります。順序が意味を持つコンテンツでは避け、画像ギャラリーのように順番への依存が低い場面で使います。

ℹ️ 補足: 自動配置で想定外の隙間が出る場合は、grid-columnやgrid-rowのまたぎ指定が広すぎないかを確認するのが一般的です。明示配置と自動配置を混ぜるほど、隙間の原因は追いにくくなるのがポイントです。

第12ステップ：グリッドの最小最大サイズ設定

最小最大サイズの設定では、minmax()を使って列幅の下限と上限を決めます。CSSグリッドの使い方として、レスポンシブな一覧で出番が多い関数です。

狭すぎるカードを避けながら、空き幅があるときは列を伸ばす指定ができます。固定幅と可変幅の中間のような作り方を表現できるのが現実的です。

minmax()関数の使い方

minmax(100px, 1fr)は、最小100px、最大は利用可能な空間に応じて伸びる指定です。値の前半が下限、後半が上限になります。

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
}

結果: 期待される表示は、3列それぞれが少なくとも100pxを保ち、余白があれば均等に広がる状態です。

この指定は横幅が十分ある画面では読みやすくなります。親要素が狭すぎる場合は3列を保ちにくいため、@mediaやauto-fitを検討すると整理できます。

最小・最大サイズ設定の例

メディアクエリを使う例では、狭い画面で1列、広い画面で3列にします。CSSグリッドの作り方として分岐が明確なので、初心者にも読みやすい構成です。

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr);
  gap: 16px;
}

@media (min-width: 600px) {
  .container {
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
  }
}

結果: 期待される表示は、600px未満で1列、600px以上で3列へ切り替わる状態です。

より短く書くなら、repeat()とauto-fitを組み合わせる応用例もあります。列数を固定せず、入るだけ列を作るため、カード一覧の対処法として使いやすいです。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

結果: 期待される表示は、各列が少なくとも180pxを保ち、画面幅に応じて列数が自動調整される状態です。

このサンプルコードは、固定ブレークポイントを細かく増やしたくない場合に向いています。カードの最小幅を小さくしすぎると内容が詰まるため、画像、見出し、ボタンの幅を見て下限を決めますし、ここを基本と考えるとよいでしょう。

まとめ

CSSグリッドは、親要素にdisplay: gridを設定し、列、行、余白、個別配置を組み合わせて二次元レイアウトを作る仕組みです。grid-template-areas、grid-auto-flow、minmax()まで進むと、ページ全体からカード内部まで整理できます。

使い方で重要なのは、親に書くプロパティと子に書くプロパティを分けることです。親にはgrid-template-columns、grid-template-rows、gap、子にはgrid-column、grid-row、align-self、justify-selfを置くと整理できます。

初心者が困ったときの対処法は、親要素がグリッドコンテナか、子要素が直下にあるか、列幅が画面幅を超えていないかを順に確認することです。サンプルコードを小さく切り出すと、崩れの原因を見つけやすくなると理解できます。

応用例は、記事一覧、商品カード、管理画面、ギャラリー、ヘッダー付きのページ枠などです。CSSグリッドを徹底解説する視点では、暗記より、コンテナ、アイテム、トラック、ギャップ、エリアの関係理解が実用的です。

関連記事

著者: Japanシーモア編集部

Japanシーモアは、Web/IoT/APP/SYS 分野のプログラミング情報を体系的に提供するメディアです。本記事は編集部による執筆とAI支援を組み合わせて制作し、公開前に編集部が校正しています。誤りや改善案がございましたらお問い合わせよりご連絡ください。

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。