このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
CSS グリッドレイアウト
CSS グリッドレイアウトモジュールは、ページを大きな領域に分割することや、 HTML のプリミティブから構成されたコントロールの部品間の、寸法、位置、レイヤーに関する関係を定義することに優れています。
表と同様に、グリッドレイアウトによって要素を列と行に整列させることができます。しかし、 CSS グリッドを使用すると、表で実現するよりもより複雑なレイアウトが可能で、あるいは簡単に実現できます。例えば、グリッドのコンテナー内にある子要素は、 CSS の位置指定された要素と同様に自分自身の位置を決めることができるので、実際に重ね合わせてレイヤーになるように配置することができます。
グリッドレイアウトの実演
次の例では、最小値 100 ピクセル、最大値 auto で作成された列を含む、3 つの行を表示します。要素は線ベースの配置に従ってグリッド上に配置されます。
<div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>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 列フレキシブルグリッドシステム、自動配置を用いた商品リスト表示などを含みます。- サブグリッド
サブグリッドの用途とデザインパターン、何を解決するのか。
- メイソンリーレイアウト
メイソンリーレイアウトとは何か、そしてそれがどのように使用されるかを詳細に説明します。
- グリッドレイアウトでのボックス配置
グリッドレイアウトにおけるボックス配置の動作です。
関連機能
CSS 表示方法モジュール
CSS ボックス配置モジュール
align-contentalign-itemsalign-selfcolumn-gapgapjustify-contentjustify-itemsjustify-selfplace-contentplace-itemsplace-selfrow-gap
CSS ボックスサイズ指定モジュール
仕様書
| Specification |
|---|
| CSS Grid Layout Module Level 2 |
関連情報
- CSS フレックスボックスレイアウトモジュール
- CSS 表示方法モジュール
- Grid by example
- CSS grid reference via Codrops
- Firefox DevTools: grid inspector
- CSS grid playground
- CSS grid garden - CSS グリッドを学ぶためのゲーム