grid
====

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
**`grid`** は CSS のプロパティで、一括指定プロパティとして明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。

`grid` を使用すると、一方の軸を `grid-template-rows` または `grid-template-columns` を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである `grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow` で設定します。

試してみましょう
--------

**メモ:** 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
構文
--


```css
/\* <'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'>? 値 \*/
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'> 値 \*/
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: revert;
grid: revert-layer;
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-rows` を `auto` に設定) することで列トラックの自動反復方法を設定します。 `dense` が設定されていれば、 `grid-auto-flow` も `column` に設定されます。

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

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

`grid-template-columns` プロパティを明示的に設定 (および `grid-template-rows` プロパティを `none` に設定) することで列トラックを設定し、 `grid-auto-rows` プロパティを設定 (および `grid-auto-columns` を `auto` に設定) することで行トラックの自動反復方法を設定します。 `dense` が設定されていれば、 `grid-auto-flow` も `column` に設定されます。

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-template-rows`: `none`
* `grid-template-columns`: `none`
* `grid-template-areas`: `none`
* `grid-auto-rows`: `auto`
* `grid-auto-columns`: `auto`
* `grid-auto-flow`: `row`
* `grid-column-gap`: `0`
* `grid-row-gap`: `0`
* `column-gap`: `normal`
* `row-gap`: `normal`
 |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `grid-template-rows`: コンテンツ領域の対応する寸法に対する相対値
* `grid-template-columns`: コンテンツ領域の対応する寸法に対する相対値
* `grid-auto-rows`: コンテンツ領域の対応する寸法に対する相対値
* `grid-auto-columns`: コンテンツ領域の対応する寸法に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `grid-template-rows`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `grid-template-columns`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `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 になる
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `grid-template-rows`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-columns`: 長さ、パーセント値、 calc の単純なリストであり、唯一の違いはリスト内の長さ、パーセント値、 calc の部分の値のみ
* `grid-template-areas`: 離散値
* `grid-auto-rows`: 計算値の型による
* `grid-auto-columns`: 計算値の型による
* `grid-auto-flow`: 離散値
* `grid-column-gap`: length
* `grid-row-gap`: length
* `column-gap`: length または パーセント値, calc();
* `row-gap`: length または パーセント値, calc();
 |

形式文法
----
```

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

例
-

### グリッドレイアウトの作成

#### HTML


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


#### CSS


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

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


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-shorthand |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連する CSS プロパティ: `grid-template`, `grid-template-rows`, `grid-template-columns`, `grid-template-areas`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* グリッドレイアウトガイド: グリッドテンプレート領域 - グリッド定義の一括指定