「もっと自由にレイアウトしたい」——Web制作者なら誰しも感じたことがあるはず。CSS Grid は、その願いを叶えてくれる強力なレイアウトシステムです。
本記事では、CSS Grid を使って雑誌のようなリッチレイアウトを実現する3つのパターンと、実務で使える実践テクニックを紹介します。
CSS Grid と Flexbox の使い分け
Flexbox は「1次元（横or縦の一方向）」、Grid は「2次元（縦横同時）」のレイアウトに強いツールです。
- Flexbox → ナビバー、ボタングループなど、一列に並べるレイアウト
- CSS Grid → カード一覧、マガジンレイアウト、ダッシュボードなど
迷ったら「行と列の両方を制御したいか？」で判断しましょう。両方ならGridです。
パターン1：マガジン風グリッド
メインビジュアルを大きく配置し、サブコンテンツを小さく並べる「雑誌の見開き」のようなレイアウト。ポートフォリオや実績紹介ページに最適です。
メインビジュアル
記事A
記事B
記事C
CSS
.magazine-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 200px 120px;
gap: 12px;
}
/* メインビジュアル：左半分を全行使う */
.magazine-grid .main {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* サブ記事：右半分の上段 */
.magazine-grid .sub-a {
grid-column: 3 / 5;
}
/* レスポンシブ対応 */
@media (max-width: 480px) {
.magazine-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
}
💡 ポイント：
grid-column: 1 / 3 は「1番目のライン(左端)から3番目のライン(中央)まで」を意味します。カラム数+1 がラインの総数です。
パターン2：auto-fill で自動折り返しカード
画面幅に応じてカードが自動で折り返される、柔軟なグリッドレイアウト。メディアクエリを一切書かなくても、完璧なレスポンシブが実現します。
01
企画
02
設計
03
デザイン
04
実装
05
テスト
06
公開
CSS
/* メディアクエリ不要のレスポンシブグリッド */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
💡 ポイント：
auto-fill と minmax(140px, 1fr) の組み合わせが鍵です。各カードの最小幅を140pxに保ちつつ、余ったスペースを均等に分配します。メディアクエリなしでレスポンシブが完成する魔法のワンライナーです。
パターン3：Holy Grail レイアウト
ヘッダー、フッター、サイドナビ、メインコンテンツ、サイドバーの5エリアからなる伝統的なレイアウト。CSS Grid の grid-template-areas を使えば、まるで設計図を描くようにレイアウトを定義できます。
Header
Nav
Main Content
Aside
CSS
.holy-grail {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 60px;
gap: 8px;
min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
/* スマホ：1カラムに */
@media (max-width: 768px) {
.holy-grail {
grid-template-areas:
"header"
"main"
"nav"
"aside"
"footer";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
まとめ：Grid は「設計図」そのもの
CSS Grid の最大の魅力は、レイアウトの「意図」をコードでそのまま表現できることです。
- マガジングリッド → 視覚的なインパクトと情報階層の表現
- auto-fill カード → メディアクエリ不要のレスポンシブ
- Holy Grail → 設計図を描くようなレイアウト定義
grid-template-areas を使えば、デザイナーが描いたワイヤーフレームをほぼそのままCSSに落とし込めます。「レイアウトの自由度」こそ、CSS Grid の真骨頂です。
💡 ツタワルの制作では：CSS Grid を活用した「情報設計ドリブン」のレイアウトを得意としています。見た目だけでなく、ユーザーの視線の流れを計算した配置設計をご提案します。