CSSグリッド ホーリーグレイルレイアウト
ヘッダー・左ナビ・本文・右サイド・フッターを並べる、定番の「ホーリーグレイル」レイアウトを CSS Grid だけで組んだ例です。外側は grid-template-rows:auto 1fr auto で上下を内容なり、中央を余り全部に割り当て、フッターを常に最下部へ押し下げます。
解説
ヘッダー・左ナビ・本文・右サイド・フッターを並べる、定番の「ホーリーグレイル」レイアウトを CSS Grid だけで組んだ例です。外側は grid-template-rows:auto 1fr auto で上下を内容なり、中央を余り全部に割り当て、フッターを常に最下部へ押し下げます。中段の本文行はさらに grid-template-columns:120px 1fr 100px で 3 カラムに分け、左右のサイドを固定幅、中央を可変にしています。JavaScript は不要で、構造は HTML と CSS だけで完結します。
使いどころ
- 管理画面やダッシュボードの基本骨格
- サイドバー付きのブログ・ドキュメントサイト
- 固定ヘッダーフッターと可変本文を持つアプリ画面
カラム幅は 120px や 100px の指定を変えるだけで調整でき、レスポンシブ対応も用意済みです。画面幅 600px 以下では本文を 1 カラムに切り替え、ナビとサイドを order で並べ替えてモバイルで縦積みになります。フロート方式に比べて記述が短く、行と列の関係が一目で読み取れるのが利点です。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
サイドバーの幅を変えるにはどうしますか
中段の本文を分割している grid-template-columns の 120px と 100px が左右サイドの幅です。この数値を変えれば左右の幅を調整できます。中央は 1fr なので残りを自動で埋めます。
古いブラウザでも表示できますか
最新の Chrome や Safari、Firefox、Edge では問題なく動きます。CSS Grid は広く対応済みですが、ごく古い環境を考える場合はフォールバックのレイアウトを別途用意してください。