フロントエンド - CSS・スタイリング

CSS Grid しーえすえすぐりっど

グリッドレイアウトFlexboxレイアウトレスポンシブデザインgrid-templateフロントエンド

CSS Gridについて教えて

簡単に言うとこんな感じ！

Webページのレイアウトを「方眼紙」みたいに縦横のマス目で組む仕組みだよ！「左に画像・右に文章・下に関連記事を3列で」みたいな複雑な配置も、CSSの数行でスパッと書けちゃうんだ！

CSS Gridとは

CSS Grid（CSSグリッドレイアウト） は、Webページの要素を縦（行）と横（列）の二次元グリッド上に配置するためのCSSのレイアウト機能です。方眼紙にパーツを貼り付けるイメージで、画面全体の骨格を直感的に設計できます。

従来のWebレイアウトはfloat（フロート）やtableタグを駆使するなど、回り道が多くありました。2017年ごろに主要ブラウザが一斉対応したCSS Gridにより、複雑な2次元レイアウトをシンプルなCSS宣言だけで実現できるようになりました。特に「ヘッダー・サイドバー・メインコンテンツ・フッター」のような定番構成は、数行のコードで組めるのが大きな魅力です。

システム発注の現場では、制作会社から「グリッドで組んでいる」と聞いたら「縦横のマス目ベースで構造化されたレイアウト設計をしている」と理解するとよいでしょう。レスポンシブ対応（スマホ・PC両対応）との相性も良く、現代のフロントエンド開発では標準的な技術となっています。

CSS Gridの基本構造と仕組み

CSS Gridは「グリッドコンテナー（親要素）」と「グリッドアイテム（子要素）」の関係で成り立っています。

概念	役割	例え
グリッドコンテナー	グリッド全体の器	方眼紙そのもの
グリッドアイテム	配置される各パーツ	方眼紙に貼るシール
グリッドライン	行・列を区切る線	方眼紙の罫線
グリッドトラック	行または列のひとかたまり	方眼紙の1行・1列
グリッドセル	行と列が交差する1マス	方眼紙の1マス
グリッドエリア	複数セルをまたぐ領域	シールが複数マスを覆う状態

代表的なプロパティと使い方をまとめると次のとおりです。

プロパティ	説明	使用例
`display: grid`	グリッドコンテナーを宣言	親要素に設定
`grid-template-columns`	列の数と幅を定義	`repeat(3, 1fr)` で3等分
`grid-template-rows`	行の数と高さを定義	`100px auto 60px`
`grid-template-areas`	エリアに名前をつけて配置	`"header header"`
`gap`	セル間の余白	`gap: 16px`
`grid-column`	アイテムの列方向スパン	`grid-column: 1 / 3`
`grid-row`	アイテムの行方向スパン	`grid-row: 2 / 4`

覚え方：「グリッドは方眼紙、frはフレキシブルな分け前」

列幅などで使う fr（フラクション） という単位が最初は戸惑いポイントです。「fr = fraction（分数・分け前）」と覚えておくと、1fr 2fr 1fr は「4等分して左1・中2・右1の比率で分ける」とすぐ読めるようになりますよ。

grid-template-areasで「絵で描くレイアウト」

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

エリア名を ASCII アートのように並べるだけで、ビジュアル通りに配置される、直感的な記法です。

歴史と背景

1996年 — Bert BosとHåkon Wium Lieがグリッドレイアウト構想を提案。当時は実現されず
2011年 — MicrosoftがIE10向けに独自実装（-ms-grid）。実験的に先行搭載
2012年 — W3CがCSS Grid Layout仕様の草案を公開
2017年3月 — Chrome・Firefox・Safariが相次いでCSS Gridを正式サポート。一気に実用段階へ
2017年10月 — Edgeも対応。主要ブラウザ全揃いとなり業界標準として普及開始
2020年代 — Flexboxと並ぶ「2大レイアウト技術」として定着。各種デザインシステムでデフォルト採用

CSS GridとFlexboxの使い分け

CSS Gridと並んでよく使われる Flexbox（フレックスボックス） との違いは「1次元 vs 2次元」に集約されます。

比較項目	CSS Grid	Flexbox
次元	二次元（行＋列）	一次元（行か列）
得意なこと	ページ全体の骨格レイアウト	ナビバー・カード列・ボタン並び
配置の主導権	コンテナー側が決める	アイテム側のサイズに左右されやすい
ブラウザ対応	IE11以降（部分対応）	IE10以降
覚えにくさ	やや多いプロパティ	比較的シンプル

実務では 「大枠のページ構成→Grid、部品の中の並び→Flexbox」 と使い分けるのが定番です。

規格	内容
CSS Grid Layout Module Level 1（W3C）	CSS Gridの基本仕様。W3C勧告（Recommendation）として公式化
CSS Grid Layout Module Level 2（W3C）	サブグリッド（subgrid）など発展機能を追加した次世代仕様
CSS Flexible Box Layout Module Level 1（W3C）	Flexboxの公式仕様。Gridと並ぶ主軸レイアウト規格