Gridをどうやって使うのかわからない
複雑なレイアウトを組みたい
Flexboxとの使い分けを知りたい
CSS Gridは、複雑なレイアウトを効率よく組めるCSSレイアウトの仕様です。
Flexboxでは難しかったWebサイトのレイアウトも、Gridを使えばシンプルなコードで実装できます。
本記事では、CSS Gridの基本概念から使い方、実践例までサンプルコード付きで解説します。
CSS Gridとは？
CSS Gridの概要を以下の3つのポイントで解説します。
- Gridは縦横の二次元でレイアウトを作る仕組み
- GridとFlexboxとの違いは面と線
- Gridはメンテナンス性が高い
それぞれ順番に見ていきましょう。
Gridは縦横の二次元でレイアウトを作る仕組み
CSSのGridは、Webページの要素を縦横に自由に配置できるCSSの機能です。
格子状の枠を作って、その中に画像やテキストなどを好きな場所に配置できます。
これまでfloatやpositionで苦労していた複雑なレイアウトも、Gridなら少ないコードで実装できます。
デザインの自由度と作業効率の両方を高められるのがGridの魅力です。
GridとFlexboxとの違いは面と線
CSSのGridとFlexboxの大きな違いは、「一次元」か「二次元」かということです。
Flexboxは、要素を横一列、あるいは縦一列という線の上で整列させるのに向いています。
Gridは、行と列で構成される面そのものを定義し、ページ全体の骨格を作るのが得意です。
また、Flexboxは中にあるコンテンツの大きさに合わせてレイアウトが決まるのに対し、Gridはまず全体のレイアウト構造を決め、そこにコンテンツをはめ込んでいくというアプローチの違いもあります。
このような特性を活かしてページ全体の大きな枠組みはGridで作り、その中の細かいパーツの整列はFlexboxで作る、というように組み合わせて使うのがおすすめです。
Gridはメンテナンス性が高い
CSSのGridを学ぶメリットは、HTMLの構造をきれいに保ったまま、CSSだけでレイアウトを自由自在に変更できることです。
コードの見た目がスッキリし、後からの修正や変更が非常に楽になります。
たとえば、パソコンで見たときはメインコンテンツとサイドバーが横に並んでいる3カラムのレイアウトを、スマートフォンで見たときには縦一列に並べるといった対応を考えます。
Gridを使えば、HTMLの構造は一切変更せず、CSSを数行書くだけでレイアウト調整が可能です。
このようにコンテンツの構造であるHTMLと装飾のCSSを分離できます。
少ないコードで直感的にレイアウトを組めるため、作業効率が上がり、コードの管理もしやすくなるなど、Web制作において欠かせないスキルです。
CSS Gridで知っておきたい6つの基本用語
CSS Gridのレイアウトを構成する6つの基本的な用語をおさえましょう。
| 用語 | 役割 | 説明 |
| グリッドコンテナ | レイアウト全体の土台 | display: grid;を指定した親要素。 |
| グリッドアイテム | 配置される部品 | グリッドコンテナの直接の子要素。 |
| グリッド線 | 配置の基準線 | グリッドを区切る縦横の線。 |
| グリッドセル | グリッドの最小単位 | グリッド線で囲まれた一つのマス目。 |
| グリッドエリア | 複数セルをまとめた領域 | 複数のセルを1つのブロックとして扱うエリア。 |
| gap | アイテム間の余白 | アイテム間の余白を設定するプロパティ。 |
図と表を見比べながら、Gridの全体像を掴んでください。
CSS Gridの基本的な使い方3ステップ
Gridの使い方を3ステップで紹介します。
- STEP1：親要素にdisplay: grid; を指定する
- STEP2：列と行の数を決める
- STEP3：アイテムを配置する
この章では、以下のHTMLを共通して使用しています。親要素のcontainerクラスに、子要素itemが6つあるシンプルな構造です。
コピー<div class="container">
<div class="item item1">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item item3">アイテム3</div>
<div class="item item4">アイテム4</div>
<div class="item item5">アイテム5</div>
<div class="item item6">アイテム6</div>
</div>
STEP1：親要素にdisplay: grid; を指定する
最初に親要素にdisplay: grid;を指定しましょう。
| .container { display: grid; } |
親要素であるcontainerをグリッドコンテナにすることで、その中のitemはグリッドアイテムになります。
itemに列の数や大きさを指定していないため、現段階では見た目の変化はありませんが、これでグリッドレイアウトの土台ができた状態です。
ここから列や行を設定することで、マス目状のレイアウトが形になります。
STEP2：列と行の数を決める
次に、レイアウトの設計図を作ります。親要素にgrid-template-columnsとgrid-template-rowsを追加して、列と行の構成を決めましょう。
ここでは、幅100pxの列を3つと高さ100pxの行を2行作ります。
コピー.container {
display: grid;
/* ↓ 100px幅の列を3つ作る */
grid-template-columns: 100px 100px 100px;
/* ↓ 100pxの高さの行を作る */
grid-template-rows: 100px 100px;
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.item {
background-color: #3498db;
color: #fff;
display: grid;
place-items: center; /* 文字を中央揃えにする */
}
このように指定すると、以下のようにアイテムが3列2行の格子状にきれいに並びます。
行と列を一括で指定するときは、次のような指定が可能です。
| grid-template: 行 / 列; |
今回の場合は、まとめて書くと以下になります。
| grid-template: 100px 100px / 100px 100px 100px; |
コードをよりシンプルにできるため、レイアウトの変更や調整をするときにも、行と列のサイズを一目で把握しやすくなります。
列と行の数を決めたら、要素同士の間に余白をつけるためにgapを使いましょう。
gap: 10px;とすると、行と列の両方に10pxのすき間ができます。
STEP3：アイテムを配置する
行と列が作れたら、各アイテムをどのマスに置くかを決めましょう。配置方法は、以下の3パターンです。
- 自動配置
- ライン指定
- エリア名で配置
それぞれの配置方法を見ていきましょう。
自動配置
デフォルト（grid-auto-flow: row）では、上図のようにHTMLに書いた順に左→右、上→下で自動配置されます。
たとえば、要素が足りなければ空白になり、多ければ下に追加されます。増えた行の高さはgrid-auto-rowsでコントロール可能です。
ライン指定
ライン指定はgrid-column（横）と grid-row（縦）で、開始線と終了線を設定する方法です。
行と列の区切り線を番号で指定し、アイテムをどの位置に置くか、必要なら複数列／複数行に広げるかを決めます。
たとえば3列のグリッドなら、縦の区切り線は1から4まで（列数+1）あります。
grid-column: 1 / 3; は、「線1から線3の手前まで（列1〜2の2マス分）」、grid-row: 2 / 4; は「線2から線4の手前まで（行2〜3の2マス分）」を使うという意味です。
以下のレイアウトを見てみましょう。
コピー.item1 {
/* 開始線=1, 終了線=3 → 列1〜2を使用（3は含まない） */
grid-column: 1 / 3;
/* 開始線=1, 終了線=2 → 行1のみを使用（2は含まない） */
grid-row: 1 / 2;
}
.item4 {
/* 開始線=1, 終了線=2 → 列1のみを使用（2は含まない） */
grid-column: 1 / 2;
/* 開始線=2, 終了線=4 → 行2〜3を使用（4は含まない） */
grid-row: 2 / 4;
}
.item6 {
/* 開始線=3, 終了線=4 → 列3のみを使用（4は含まない） */
grid-column: 3 / 4;
/* 開始線=2, 終了線=3 → 行2のみを使用（3は含まない） */
grid-row: 2 / 3;
}
ポイントは、範囲が終了線の手前までということです。終了線そのものは含まれないことを覚えておきましょう。
エリア名で配置
親要素にgrid-template-areasを指定して行と列ごとの配置図を文字列で定義し、子要素には grid-areaでそのエリア名を指定して配置します。
HTMLの順番を変えずに位置を決められ、レイアウトの意図が読み取りやすくなります。
具体的な書き方は、次章「エリアに名前をつけて配置する grid-template-areas」で解説します。
CSS Gridの主要プロパティと単位
基本的な使い方がわかったところで、CSS Gridの便利な単位やプロパティを見ていきましょう。
- 比率で幅を指定するfr
- 繰り返しを書くrepeat()
- エリアに名前をつけて配置するgrid-template-areas
これらを覚えることで、レイアウトの幅が格段に広がります。
比率で幅を指定するfr
frはfractionの略で、親要素から見た子要素の大きさを割合で指定する単位です。子要素の幅をpxで固定しないため、画面幅に合わせたレスポンシブ対応ができます。
3つの列を均等な幅で並べたい場合を見てみましょう。
上図を見ると、親要素のcontainerを3分割しており、親要素の大きさに応じて列のサイズが変化していることがわかります。
たとえば、grid-template-columns: 1fr 2fr;と指定すると、1：2の比率で分割します。%指定でよくある計算のズレを気にする必要がないため、柔軟なレイアウトが組めます。
繰り返しを書くrepeat()
同じ設定を繰り返すときは、repeat関数を使用します。
書き方は以下の通り。
| repeat(繰り返す回数, 幅の指定) |
たとえば、grid-template-columns: 100px 100px 100px;は以下のように書き換え可能です。
| .container { grid-template-columns: repeat(3, 100px); } |
grid-template-rowsでも同様に指定でき、同じサイズの列や行をシンプルに書けて便利です。
エリアに名前をつけて配置するgrid-template-areas
grid-template-areasを使うと、レイアウトの各領域に名前をつけて視覚的にアイテムを配置できます。書き方は以下の通りです。
- grid-templateプロパティを指定する
- アイテムにエリアを割り当てる
エリア名を付けることでレイアウト構造が視覚的にわかりやすくなり、見返した際の可読性が高まります。
下図のレイアウトを見ておきましょう。
コピー<div class="container">
<div class="item header">ヘッダー</div>
<div class="item main">メイン</div>
<div class="item sidebar">サイドバー</div>
<div class="item footer">フッター</div>
</div>
コピー.container {
display: grid;
gap: 5px;
grid-template:
"header header" 100px
"main sidebar" 2fr
"footer footer" 80px
/ 2fr 1fr;
}
/* 各子要素に、grid-templateで定義したエリア名を割り当てます */
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
/* --- 以下は、見た目を分かりやすくするための装飾です --- */
.item {
display: grid;
place-items: center;
color: #fff;
border-radius: 5px;
padding: 10px;
}
.header {
background-color: #e74c3c;
}
.main {
background-color: #3498db;
}
.sidebar {
background-color: #2ecc71;
}
.footer {
background-color: #95a5a6;
}
grid-templateプロパティを指定する
まず、親要素に display: grid; を指定します。
次に、grid-templateプロパティを使用して以下を一括指定します。
- grid-template-areas
- grid-template-rows
- grid-template-columns
まとめて書くと以下のようになります。
| grid-template: “header header” 100px /* 1行目 */ “main sidebar” 2fr /* 2行目 */ “footer footer” 80px /* 3行目 */ / 2fr 1fr; |
書き方は「grid-template: 行 / 列」で、行の高さを書いてから列の幅を指定します。
また、”header header” や “main sidebar” は クラス名ではなく配置図です。
たとえば、同じエリア名を連続で記述するとそのマスの数の領域を確保します。実際にブラウザで表示すると、headerとfooterは2マス分の幅になるため、エリア名を2つ連続で記述しています。
アイテムにエリアを割り当てる
行と列を指定したら、アイテムをエリアに割り当てていきましょう。HTMLの各要素（headerクラスやmainクラスなど）に、grid-areaでレイアウト上の役割を示す名前を付けます。
コピー.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
このときgrid-areaで付ける名前は、HTMLのクラス名やID名とは関係なく、わかりやすいものをつけてください。
しかし、親で定義したエリア名（grid-template-areasまたはgrid-template）と一致させる必要があります。
スペルや大文字小文字が異なると、その要素はエリアに割り当てられず自動配置されます。
CSS Gridを使ったレスポンシブデザイン
Gridを使うと、メディアクエリを使わなくても画面サイズに応じてレスポンシブ対応ができます。
gap・minmax・auto-fitなどを組み合わせることで、PCでは3〜4枚横並び、スマホでは縦1列に実装できます。
以下のカード型レイアウトを見てみましょう。
コピー<section class="cards">
<article class="card">
<img src="https://picsum.photos/640/360?1" alt="">
<h3>Card 1</h3>
<p>説明テキストが入ります。</p>
</article>
<article class="card">
<img src="https://picsum.photos/640/360?2" alt="">
<h3>Card 2</h3>
<p>説明テキストが入ります。</p>
</article>
<article class="card">
<img src="https://picsum.photos/640/360?3" alt="">
<h3>Card 3</h3>
<p>説明テキストが入ります。</p>
</article>
<article class="card">
<img src="https://picsum.photos/640/360?4" alt="">
<h3>Card 4</h3>
<p>説明テキストが入ります。</p>
</article>
</section>
コピー:root {
--gap: 24px; /* カードの間隔 */
--min: 260px; /* カードの最小幅 */
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
gap: var(--gap);
max-width: 1200px;
margin: 0 auto;
padding: 40px;
}
.card {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-3px);
}
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.card h3 {
margin: 16px;
font-size: 1.1rem;
}
.card p {
margin: 0 16px 16px;
color: #555;
font-size: 0.95rem;
}
CSS Gridは、以下の3つのポイントで構成されています。
- 変数を使って管理しやすくする
- グリッドコンテナを指定する
- gapでカードの間を整える
それぞれ詳しく解説します。
変数を使って管理しやすくする
まず、メンテナンス性を高めるためにCSS変数を定義しましょう。
:rootに変数を定義しておくと、デザインの調整を一箇所で管理できるようになります。
この例では、カードの間隔とカードの最小幅を変数で定義しています。
| :root { –gap: 24px; /* カードの間隔 */ –min: 260px; /* カードの最小幅 */ } |
変数を使用するときは、var(–gap)のような形で呼び出します。
たとえば、「もう少し余白を広げたい」と思ったときは、:rootで定義した–gapの値を変えるだけで全体に反映されます。
グリッドコンテナを指定する
変数を指定したあとは、親要素にグリッドコンテナを指定しましょう。
グリッドコンテナにすると、子要素のcardが自動的にマス目状に配置されます。
| .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(–min), 1fr)); gap: var(–gap); } |
上記のコードでは、display: grid;でレイアウトの基盤を作り、grid-template-columnsで「横方向の列をどう並べるか」を指定しています。
grid-template-columnsは列の数や幅を柔軟にコントロールできるため、画面サイズに合わせたコーディングができます。
例では、以下の3つを組み合わせています。
- repeat：同じ設定を繰り返す
- auto-fit：画面に収まるだけ自動で列を増やす
- minmax：カードの幅を最小260pxに保ち、余裕があれば広げる
3つを指定することで、画面が広いときは3〜4列、狭いときは1列と列が自動調整されます。
スマホでカードが1列にならない・横幅が縮まらないとき
HTMLの<head>内に<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> を入れましょう。画面幅をデバイスに合わせて等倍表示することで、正しくレスポンシブ表示がされるようになります。
gapでカードの間を整える
gapは、カード同士の間隔を均等にするプロパティです。
たとえば marginを使うと要素の外側に余白ができますが、gapは要素と要素の間だけに余白を作ります。
上図では、カード間のピンクの部分がgapで指定した余白です。
gapは子要素の余白を均等にするプロパティのため、display: grid;やdisplay: flex;を指定した親要素に記述します。
gapを指定しても効果がないときは、子要素にgapを書いていないか確認しましょう。
まとめ：CSS Gridでレイアウトの幅を広げよう
CSS Gridは、Webページのレイアウトを縦横の二次元で自由に設計できるレイアウトです。
display: grid; を指定し、行と列を定義してアイテムを配置するだけで、複雑なデザインもシンプルなコードで実装できます。Flexboxが「線」で要素を並べるのに対し、Gridは「面」で全体の構造を作るという特徴があります。
また、fr単位やrepeat関数、grid-template-areasなどを活用すれば、メンテナンス性の高いコーディングが可能です。
コーディングスキルを高めていきたい方は、デイトラのWeb制作コースがおすすめです。現役コーダーから学びながら、実践的なレイアウト設計力を身につけられます。
Web制作を仕事にするならデイトラWeb制作コースがおすすめ
デイトラ情報局は、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつきで品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的に分かります。
分からないことは、実務を経験しているメンター陣がDiscordによる公式サポートの質問部屋で丁寧に指導してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
