CSS Grid Layoutは、Webページの要素を「行」と「列」の両方で整理できる便利なレイアウト方法です。Flexboxが横並びや縦並びの1次元レイアウトに向いているのに対し、gridは2次元の配置が得意です。たとえば、ヘッダー、サイドバー、メイン、フッターのような構成をきれいに並べたいときに活躍します。
この記事では、gridレイアウトの基本的な考え方から、よく使うプロパティ、実際の書き方までを初心者向けにやさしく解説します。まずは全体像をつかんで、少しずつ使い方を覚えていきましょう。
CSS Grid Layoutとは
CSS Grid Layoutは、親要素に対して「グリッドの枠組み」を作り、その中に子要素を配置していく仕組みです。レイアウト全体を管理しやすく、複雑なページ構成でも見た目を整えやすいのが特徴です。
gridを使うと、要素を単に横に並べるだけではなく、どの位置に置くか、どれくらいの幅を持たせるかを細かく指定できます。特に、カード一覧や2カラム・3カラムのレイアウトに向いています。
gridレイアウトの基本の考え方
gridでは、まず親要素にdisplay: grid;を指定します。これだけで、その要素の中の子要素がグリッドの対象になります。次に、列数や行数をgrid-template-columnsやgrid-template-rowsで決めていきます。
最初は「箱を並べるための見えないマス目を作る」と考えると分かりやすいです。各要素はそのマス目に沿って配置されるので、位置が崩れにくく、意図した通りのデザインを作りやすくなります。
基本のHTML
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>この例では、.gridが親要素、.itemが子要素です。gridでは親要素に設定を入れるのが基本です。
基本のCSS
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.item {
background: #eaf2ff;
padding: 16px;
border-radius: 8px;
}このコードでは、2列のグリッドを作っています。repeat(2, 1fr)は「同じ幅の列を2つ作る」という意味です。gapは要素同士のすき間を指定するプロパティで、見た目を整えるのに便利です。
よく使うプロパティ
gridを使うときは、いくつかの基本プロパティを覚えておくと便利です。特に重要なのは、列や行を決めるプロパティと、アイテムの配置を調整するプロパティです。
grid-template-columns
列の数と幅を指定します。たとえば、3列レイアウトにしたい場合は次のように書きます。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}frは、余白を分け合うための単位です。画面サイズに合わせて柔軟に伸縮するので、レスポンシブなレイアウトでよく使われます。
grid-template-rows
行の高さを指定したいときに使います。必要な場面だけ設定すれば十分で、すべてのレイアウトで必須ではありません。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 120px 120px;
}gap
グリッド内の要素同士の間隔を指定します。以前はgrid-gapも使われていましたが、現在はgapを使うのが一般的です。横方向と縦方向を分けて指定することもできます。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px 16px;
}この例では、上下の間隔が24px、左右の間隔が16pxになります。
grid-auto-flow
子要素をどの順番で配置するかを指定します。基本的には自動で並びますが、並び方を調整したいときに役立ちます。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}通常はrowで問題ありません。慣れてきたら、必要に応じて他の値も確認するとよいでしょう。
実際によくあるレイアウト例
gridは、実務でよくある「カード型レイアウト」や「2カラムレイアウト」に特に向いています。ここでは、すぐに使いやすい例を紹介します。
カードを並べるレイアウト
<div class="card-grid">
<article class="card">Card 1</article>
<article class="card">Card 2</article>
<article class="card">Card 3</article>
<article class="card">Card 4</article>
</div>.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.card {
padding: 20px;
background: #f7f7f7;
border: 1px solid #ddd;
border-radius: 10px;
}repeat(auto-fit, minmax(240px, 1fr))は、画面幅に応じて列数を自動調整しやすい書き方です。各カードは最低240pxを保ち、入るだけ並ぶので、レスポンシブ対応に便利です。
サイドバー付きの2カラムレイアウト
<div class="layout">
<main class="content">メインコンテンツ</main>
<aside class="sidebar">サイドバー</aside>
</div>.layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
}
.content {
background: #fff7e6;
padding: 20px;
}
.sidebar {
background: #eef7ee;
padding: 20px;
}この例では、メインコンテンツを広めに、サイドバーを少し狭めにしています。2fr 1frとすることで、比率を簡単に調整できます。
要素の配置を細かく調整する方法
gridの便利な点は、見た目の並びだけでなく、個別の要素を特定の位置に配置できることです。たとえば、1つの要素だけ大きく見せたい場合にも対応できます。
grid-columnとgrid-row
grid-columnとgrid-rowを使うと、要素がどの列・行にまたがるかを指定できます。
.item-large {
grid-column: 1 / 3;
grid-row: 1 / 2;
}この例では、1列目から3列目の手前までを使うので、2列分の幅になります。こうした指定は、バナーや注目枠などを作るときに便利です。
初心者がつまずきやすいポイント
gridは便利ですが、最初は「どこに何を書けばいいのか」が分かりにくいことがあります。特に多いのは、親要素に設定するべき内容を子要素に書いてしまうケースです。基本的に、グリッド全体の設計は親要素で行います。
また、frの意味が分かりにくい場合は、「残った幅を分配する単位」と覚えると理解しやすくなります。固定幅ばかりを使うより、frやminmax()を組み合わせた方が、さまざまな画面サイズに対応しやすくなります。
さらに、要素の間隔を空けたいときにmarginをたくさん書くより、gapを使った方が管理しやすいことが多いです。gridでは、まずgapを使う習慣をつけるとよいでしょう。
gridを使うときの基本の考え方
gridレイアウトは、「どの要素をどこに置くか」を整理しながら組めるのが大きなメリットです。見た目だけでなく、コードの構造も分かりやすくなりやすいので、保守しやすいCSSを書きたいときにも向いています。
まずは、display: grid;、grid-template-columns、gapの3つを押さえるだけでも、かなり多くのレイアウトに対応できます。慣れてきたら、minmax()やgrid-column、grid-rowを使って、より柔軟な配置に挑戦してみてください。
まとめ
CSS Grid Layoutは、行と列を組み合わせて要素を配置できる、非常に実用的なレイアウト機能です。2カラム構成やカード一覧など、Web制作でよくあるデザインをきれいに組みやすくなります。
まずは親要素にdisplay: grid;を指定し、列数をgrid-template-columnsで決め、gapで余白を整えるところから始めましょう。基本を押さえれば、gridは初心者でも十分使いこなせるようになります。
