CSS Gridとは？初心者でもわかるグリッドレイアウトとフレックスとの違いをやさしく解説

CSS Gridとは？フレックスとの違いと特徴を解説

先生と生徒の会話形式で理解しよう

生徒

「CSSのGridとFlexboxって、何が違うんですか？名前が似ていて混乱します…」

先生

「どちらもレイアウトを整える仕組みですが、得意な形が違います。」

生徒

「パソコンをあまり触ったことがなくても理解できますか？」

先生

「大丈夫です。身近な例えを使って、Gridの特徴から順番に説明します。」

1. CSS Gridとは何かをやさしく理解しよう

CSS Gridは、画面を「行」と「列」に分けてレイアウトを作る方法です。表やマス目のように、縦と横の線を引いて配置を考えるイメージになります。

たとえば、新聞やチラシを見ると、文字や写真が四角い枠の中にきれいに並んでいます。このような配置を作るのがCSS Gridです。

Gridという言葉は「格子」や「網目」という意味があります。画面をマス目状に区切ることで、複雑なレイアウトでも整理して配置できます。

2. CSS Gridの基本的な考え方

CSS Gridでは、まず「親の箱」にGridを指定します。この親の箱の中に、子の要素を並べていきます。

行は横の並び、列は縦の並びです。行と列の交差した場所に、要素が入ると考えると分かりやすいです。


<style>
	.grid-box {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 10px;
	}
</style>

<div class="grid-box">
	<div>左上</div>
	<div>右上</div>
	<div>左下</div>
	<div>右下</div>
</div>

ブラウザ表示

grid-template-columnsは、列の数と幅を決める命令です。 frは「残りの幅を分ける」という意味で、初心者でも扱いやすい単位です。

3. FlexboxとGridの一番大きな違い

Flexboxは基本的に「一方向」の並びが得意です。横か縦、どちらか一つの方向に並べるのが中心になります。

一方でCSS Gridは、「縦と横を同時」に考えます。最初からマス目を作るため、全体の構造を決めるのに向いています。

例えるなら、Flexboxは棚に本を横一列に並べる感覚です。 Gridは、引き出しがたくさんある整理ケースに物を入れる感覚です。

4. CSS Gridが得意なレイアウトの例

CSS Gridは、ページ全体の骨組みを作るときに力を発揮します。ヘッダー、メニュー、本文、サイドバーなどをきれいに区切りたい場合に向いています。


<style>
	.layout {
	    display: grid;
	    grid-template-columns: 200px 1fr;
	    gap: 10px;
	}
</style>

<div class="layout">
	<div>メニュー</div>
	<div>メイン内容</div>
</div>

ブラウザ表示

左に固定幅のメニュー、右に広い内容を置くような構造は、 CSS Gridを使うと直感的に作れます。