CSSグリッドレイアウト（CSS Grid Layout）は、ウェブページのレイアウトを柔軟かつ直感的に作成できる強力なレイアウトシステムです。本記事では、CSSグリッドレイアウトの基本から応用までを詳しく解説します。
1. CSSグリッドレイアウトとは？
CSSグリッドレイアウトは、行（row）と列（column）を組み合わせた2次元レイアウトシステムです。従来のフロート（float）やFlexboxと異なり、グリッド全体の配置を一括で管理できるため、より直感的なレイアウト設計が可能になります。
2. 基本的なプロパティ
2.1. グリッドコンテナの定義
グリッドを使用するには、親要素（コンテナ）に display: grid; を指定します。
.container {
display: grid;
}
2.2. 行と列の指定
grid-template-columns と grid-template-rows を使って、列と行のサイズを指定できます。
.container {
display: grid;
grid-template-columns: 100px 200px auto;
grid-template-rows: 100px auto;
}
上記の例では、
- 1列目は100px
- 2列目は200px
- 3列目は自動調整（
auto） - 1行目は100px
- 2行目は自動調整（
auto）
となります。
3. グリッドの配置
3.1. grid-gap（gap）
グリッドアイテム間の余白を設定できます。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
3.2. grid-column と grid-row
各アイテムの配置を指定できます。
.item1 {
grid-column: 1 / 3; /* 1列目から3列目までの幅を占める */
grid-row: 1 / 2; /* 1行目のみに配置 */
}
4. 応用テクニック
4.1. grid-template-areas
グリッドの領域を名前で指定できます。
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px auto;
grid-template-rows: 50px auto 50px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
4.2. minmax() を使ったレスポンシブ対応
minmax() を使用すると、最小・最大サイズを指定できます。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
4.3. auto-fit と auto-fill の違い
auto-fit: 使用可能なスペースを埋めるためにセルが伸縮するauto-fill: 余白がある場合、追加のセルを作成するが中身が空になる
5. まとめ
CSSグリッドレイアウトを活用すると、従来のレイアウト方法よりも簡単に柔軟なデザインが可能になります。基本的なプロパティを理解した上で、grid-template-areas や minmax() などの応用テクニックを活用し、より洗練されたレイアウトを実現しましょう。