CSS の grid プロパティは一括指定プロパティで、明示的なすべてのグリッドプロパティ (grid-template-rows, grid-template-columns, grid-template-areas) と、暗黙のすべてのグリッドプロパティ (grid-auto-rows, grid-auto-columns, grid-auto-flow) を単一の宣言で設定します。

メモ: 明示的なグリッドプロパティ、または暗黙のグリッドプロパティのみを単一の grid 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。

構文

/* <'grid-template'> 値 */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* グローバル値	 */
grid: inherit;
grid: initial;
grid: unset;

<'grid-template'>
grid-template を定義し、これには grid-template-columns, grid-template-rows, grid-template-areas が含まれます。
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
grid-template-rows プロパティを明示的に設定 (および grid-template-columns プロパティを none に設定) することで行トラックを設定し、 grid-auto-columns プロパティを設定 (および grid-auto-rowsauto に設定) することで列トラックの自動反復方法を設定します。 dense が設定されていれば、 grid-auto-flowcolumn に設定されます。

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
grid-template-columns プロパティを明示的に設定 (および grid-template-rows プロパティを none に設定) することで列トラックを設定し、 grid-auto-rows プロパティを設定 (および grid-auto-columnsauto に設定) することで行トラックの児童反復方法を設定します。 dense が設定されていれば、 grid-auto-flowcolumn に設定されます。

ほかの grid のサブプロパティはすべて、初期値に初期化されます。

形式文法

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

HTML

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

結果

仕様書

仕様書 状態 備考
CSS Grid Layout
grid の定義
勧告候補 初回定義

初期値一括指定の各プロパティとして
適用対象grid containers
継承なし
パーセンテージ一括指定の各プロパティとして
メディア視覚
計算値一括指定の各プロパティとして
  • grid-template-rows: 指定通り。ただし相対的 length は絶対的 length に変換
  • grid-template-columns: 指定通り。ただし相対的 length は絶対的 length に変換
  • grid-template-areas: 指定値
  • grid-auto-rows: 指定されたパーセンテージ値または絶対的な長さ
  • grid-auto-columns: 指定されたパーセンテージ値または絶対的な長さ
  • grid-auto-flow: 指定値
  • grid-column-gap: 指定されたパーセンテージ値または絶対的な長さ
  • grid-row-gap: 指定されたパーセンテージ値または絶対的な長さ
  • column-gap: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
  • row-gap: 指定通りで、 <length> は絶対長になり、 normal の計算値は段組み要素を除き 0 になる
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 16Firefox 完全対応 52
完全対応 52
完全対応 40
無効
無効 From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 44
完全対応 44
完全対応 28
無効
無効 From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 57
完全対応 57
完全対応 29
無効
無効 From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile 未対応 なしFirefox Android 完全対応 52
完全対応 52
完全対応 40
無効
無効 From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0
完全対応 6.0
完全対応 6.0
補足
補足 This was added early so is out of sync with the equivalent Chromium version.

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,