EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

CSS Gridアイテム

Gridアイテムのプロパティは、Gridコンテナ内の個々の子要素の配置を細かく制御できます。

Gridアイテムのプロパティ

早見表

プロパティ 値 用途
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の省略形

grid-columnとgrid-row

グリッド上のアイテムの開始位置と終了位置を制御：

サンプル

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.span-2-col { grid-column: span 2; }
.span-2-row { grid-row: span 2; }
</style>
<div class="grid">
  <div class="item">1</div>
  <div class="item span-2-col">2列にまたがる</div>
  <div class="item">3</div>
  <div class="item span-2-row">2行にまたがる</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
▶ 試してみよう

全幅アイテム

grid-column: 1 / -1ですべての列にまたがる：

サンプル

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.header {
  grid-column: 1 / -1; /* すべての列にまたがる */
  background: #2c3e50;
  color: white;
  padding: 15px;
  text-align: center;
}
.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}
</style>
<div class="grid">
  <div class="header">ヘッダー（全幅）</div>
  <div class="item">列1</div>
  <div class="item">列2</div>
  <div class="item">列3</div>
</div>
▶ 試してみよう

justify-self / align-self

個々のセル内の配置を制御：

サンプル

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
  height: 200px;
}
.item {
  background: #e74c3c;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
.start { justify-self: start; align-self: start; }
.center { justify-self: center; align-self: center; }
.end { justify-self: end; align-self: end; }
</style>
<div class="grid">
  <div class="item start">開始</div>
  <div class="item center">中央</div>
  <div class="item end">終了</div>
</div>
▶ 試してみよう

Gridのオーバーラップ

Gridアイテムはオーバーラップでき、後のアイテムが上に表示されます：

サンプル

HTML 
<style>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: rgba(231, 76, 60, 0.7);
  color: white;
  padding: 20px;
  z-index: 1;
}
.item2 {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  background: rgba(52, 152, 219, 0.7);
  color: white;
  padding: 20px;
}
</style>
<div class="grid">
  <div class="item1">アイテム1（背面）</div>
  <div class="item2">アイテム2（前面）</div>
</div>
▶ 試してみよう

❓ よくある質問

Q grid-column: 1 / -1とはどういう意味ですか？
A 「グリッド線1から最後のグリッド線（-1は最後の線番号）まで」を意味し、行全体にまたがります。全幅のヘッダーに最適で、合計列数を知る必要はありません。
Q Gridアイテムはオーバーラップできますか？
A はい。Gridはアイテムが同じグリッドエリアを占有することを許可し、後のアイテムが前のアイテムを覆います。画像上のテキストなどのオーバーレイエフェクトに使用できます。z-indexでスタッキングを制御します。
Q spanキーワードの使い方は？
A `grid-column: span 2`は「2列にまたがる」を意味し、グリッド線番号を書くより直感的です。どの線から始まるかを知る必要はなく、ブラウザが自動的に計算します。正確な列数がわからないレスポンシブシナリオで特に便利です。

📖 まとめ

📝 演習

  1. 4×4のグリッドを作成し、列2、行2から始まる2列2行にまたがるアイテムを配置してください。
  2. grid-template-areasで完全なページレイアウトを作成してください：ヘッダー（2列にまたがる）、サイドバー、コンテンツエリア、フッター（2列にまたがる）。
  3. グリッドコンテナ内のすべてのアイテムを水平方向と垂直方向に中央揃えにしてください（place-items: centerを使用）。
  4. 3番目のGridアイテムをセルの右下隅に配置してください（justify-selfとalign-selfを使用）。
100%