grid-area
=========

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-area`** は CSS の一括指定プロパティで、 grid 内でのグリッドアイテムの寸法と位置を指定するために、線、区間、なし (自動) をグリッド配置に適用することで、グリッド領域の縁を指定します。

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

4 つの `<grid-line>` が指定された場合、 `grid-row-start` が最初の値に設定され、 `grid-column-start` が 2 つ目の値に設定され、 `grid-row-end` が 3 つ目の値に設定され、 `grid-column-end` が 4 つ目の値に設定されます。

`grid-column-end` が省略された場合、 `grid-column-start` が `<custom-ident>` であれば、 `grid-column-end` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。

`grid-row-end` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 `grid-row-end` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。

`grid-column-start` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 4 つの個別指定値はその値に設定されます。それ以外の場合は `auto` に設定されます。

grid-area プロパティは領域の名称として動作する `<custom-ident>` に設定することができ、これは `grid-template-areas` を用いて配置することができます。

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

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

* `grid-row-start`
* `grid-column-start`
* `grid-row-end`
* `grid-column-end`
構文
--


```css
/\* キーワード値 \*/
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/\* <custom-ident> 値 \*/
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/\* <integer> && <custom-ident>? 値 \*/
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/\* span && [ <integer> || <custom-ident> ] 値 \*/
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/\* グローバル値 \*/
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: unset;
```

### 値

`auto`

プロパティをグリッドアイテムの配置に影響させず、自動的に配置するか、既定の `1` とするためのキーワードです。

`<custom-ident>`

`<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。

**メモ:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。

そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。

`<integer> && <custom-ident>?`

*n* 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

`0` の `<integer>` 値は無効です。

`span && [ <integer> || <custom-ident> ]`

グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から *n* 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。

名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

`<integer>` が省略された場合の既定値は `1` です。負の数や 0 は無効です。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `grid-row-start`: `auto`
* `grid-column-start`: `auto`
* `grid-row-end`: `auto`
* `grid-column-end`: `auto`
 |
| 適用対象 | 包含ブロックがグリッドコンテナーであるグリッドアイテムまたは絶対位置指定のボックス |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `grid-row-start`: 指定通り
* `grid-column-start`: 指定通り
* `grid-row-end`: 指定通り
* `grid-column-end`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

grid-area =   
  <grid-line> [ / <grid-line> ]{0,3}    
  
<grid-line> =   
  auto                                                |  
  <custom-ident>                                      |  
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |  
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]     
  
```

例
-

### グリッド領域の設定

#### HTML


```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```


#### CSS


```css
#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # propdef-grid-area |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-row`, `grid-row-start`, `grid-row-end`, `grid-column`, `grid-column-start`, `grid-column-end`, `grid-template-areas`
* グリッドレイアウトガイド: 線に基づく配置を使用したグリッドレイアウト
* 動画チュートリアル: *Line-based placement*