CSS グリッドレイアウト

CSS グリッドレイアウトモジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。

表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。

グリッドレイアウトの実演

次の例では、最小値 100 ピクセル、最大値 auto で作成された列を含む、3 つの行を表示します。要素は線ベースの配置に従ってグリッド上に配置されます。

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {
  box-sizing: border-box;
}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}
.wrapper > div {
  border: 2px solid rgb(233 171 88);
  border-radius: 5px;
  background-color: rgb(233 171 88 / 50%);
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

この例では、グリッドの作成に display、grid-template-columns、grid-template-rows、gap を使用し、グリッド内のアイテムの位置指定に grid-column と grid-row を使用しています。使用されている HTML と CSS を表示・編集するには、例の右上にある 'Play' をクリックしてください。

<flex> （fr 単位）

用語と定義

ガイド

グリッドレイアウトの基本概念: CSS グリッドレイアウトモジュールで提供される各種機能の概要。
グリッドレイアウトと他のレイアウト方法との関係: グリッドレイアウトが、フレックスボックス、絶対位置指定要素、display: contents を含む他の CSS 機能とどのように連携するか。
線に基づく配置を使用したグリッドレイアウト: グリッド線と、それらの線に対するアイテムの位置指定方法。これには grid-area プロパティ、負の線番号、複数セルにまたがる配置、グリッドの溝の作成が含まれます。
グリッドテンプレート領域: 名前付きテンプレート領域を使用してグリッドアイテムを配置します。
名前付きグリッド線を使用したレイアウト: 名前とトラックサイズを組み合わせます。名前付きグリッドラインとテンプレート領域を定義してグリッドアイテムを配置します。
グリッドレイアウトでの自動配置: グリッドは、配置プロパティが宣言されていないアイテムをどのように配置するか。
グリッドレイアウトのボックス配置: グリッドレイアウトの 2 つの軸に沿って、グリッドアイテムを揃え、整列させ、中央に配置します。
グリッド、論理的な値、書字方向: CSS グリッドレイアウト、ボックス配置、書字方向の相互作用、および CSS の論理的・物理的プロパティと値について考察します。
グリッドレイアウトとアクセシビリティ: CSS グリッドレイアウトがアクセシビリティに与える利点と弊害について考察します。
グリッドを使用したよくあるレイアウトの実現: CSS グリッドレイアウトを用いたデザイン時に活用できる様々なテクニックを示す複数のレイアウト例。grid-template-areas の使用、12 列フレキシブルグリッドシステム、自動配置を用いた商品リスト表示などを含みます。
サブグリッド: サブグリッドの用途とデザインパターン、何を解決するのか。
メイソンリーレイアウト: メイソンリーレイアウトとは何か、そしてそれがどのように使用されるかを詳細に説明します。
グリッドレイアウトでのボックス配置: グリッドレイアウトにおけるボックス配置の動作です。

仕様書

Specification
CSS Grid Layout Module Level 2

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1970年1月1日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content

CSS グリッドレイアウト

グリッドレイアウトの実演

リファレンス

プロパティ

関数

データ型

用語と定義

ガイド

関連機能

仕様書

関連情報

Help improve MDN