CSS: CSS Gridアイテム
最終更新：2026-10-13
Gridアイテムのプロパティは、Gridコンテナ内の個々の子要素の配置を細かく制御できます。
1. Gridアイテムのプロパティ
(1) 早見表
| プロパティ | 値 | 用途 |
|---|---|---|
grid-column |
1 / 3、span 2 |
列の配置 |
grid-row |
1 / 3、span 2 |
行の配置 |
grid-area |
header、1 / 2 / 3 / 4 |
名前付きエリアまたは行の配置 |
justify-self |
start、end、center、stretch |
セル内の水平方向の配置 |
align-self |
start、end、center、stretch |
セル内の垂直方向の配置 |
place-self |
center、start end |
justify + alignの省略形 |
2. grid-columnとgrid-row
グリッド上のアイテムの開始位置と終了位置を制御：
▶ サンプル
▶ 試してみよう(1) 全幅アイテム
grid-column: 1 / -1ですべての列にまたがる：
▶ サンプル
▶ 試してみよう3. justify-self / align-self
個々のセル内の配置を制御：
▶ サンプル
▶ 試してみよう4. Gridのオーバーラップ
Gridアイテムはオーバーラップでき、後のアイテムが上に表示されます：
▶ サンプル
▶ 試してみよう❓ よくある質問
Q grid-column: 1 / -1とはどういう意味ですか？
A 「グリッド線1から最後のグリッド線（-1は最後の線番号）まで」を意味し、行全体にまたがります。全幅のヘッダーに最適で、合計列数を知る必要はありません。
Q Gridアイテムはオーバーラップできますか？
A はい。Gridはアイテムが同じグリッドエリアを占有することを許可し、後のアイテムが前のアイテムを覆います。画像上のテキストなどのオーバーレイエフェクトに使用できます。z-indexでスタッキングを制御します。
Q spanキーワードの使い方は？
A
grid-column: span 2は「2列にまたがる」を意味し、グリッド線番号を書くより直感的です。どの線から始まるかを知る必要はなく、ブラウザが自動的に計算します。正確な列数がわからないレスポンシブシナリオで特に便利です。📖 まとめ
- Gridアイテムの配置は非常に柔軟で、開始/終了グリッド線を正確に指定するか、
spanキーワードで複数行/列にまたがることができます - セル内では、
justify-items/align-itemsが全体的な配置を制御し、justify-self/align-selfが個々の要素を制御します - 線番号が覚えにくい場合は、
grid-template-areasで名前付き領域を試してください——より直感的です
📝 練習問題
- 4×4のグリッドを作成し、列2、行2から始まる2列2行にまたがるアイテムを配置してください。
grid-template-areasで完全なページレイアウトを作成してください：ヘッダー（2列にまたがる）、サイドバー、コンテンツエリア、フッター（2列にまたがる）。- グリッドコンテナ内のすべてのアイテムを水平方向と垂直方向に中央揃えにしてください（
place-items: centerを使用）。 - 3番目のGridアイテムをセルの右下隅に配置してください（
justify-selfとalign-selfを使用）。
