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を使うと直感的に作れます。