grid-auto-columns
=================

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-auto-columns`** は CSS のプロパティで、暗黙的に生成されたグリッドの列トラックまたはトラックのパターンの大きさを指定します。

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

グリッドアイテムが `grid-template-columns` で明示的に大きさが指定されていない列に配置された場合、暗黙的に grid トラックが作成され、そのアイテムを保持します。これには、範囲外の列に明示的に配置する場合と、自動配置アルゴリズムによって追加の列が作成される場合があります。

構文
--


```css
/\* キーワード値 \*/
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/\* <length> 値 \*/
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/\* <percentage> 値 \*/
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/\* <flex> 値 \*/
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/\* minmax() 値 \*/
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/\* fit-content() 値 \*/
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/\* multiple track-size 値 \*/
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

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

### 値

`<length>`

負の値ではない長さです。

`<percentage>`

グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない `<percentage>` です。グリッドコンテナーのインライン方向の寸法が不定の場合は、パーセント値は `auto` のように扱われます。

`<flex>`

`fr` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。

`minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。

`max-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。

`min-content`

グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。

`minmax(min, max)`

*min* 以上、*max* 以下の寸法の範囲を定義する関数記法です。 *max* が *min* より小さい場合は、 *max* は無視され、 *min* として扱われます。`<flex>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。

`fit-content( [ <length> | <percentage> ] )`

`min(max-content, max(auto, argument))` という式を表します。この式は、トラックの寸法が `auto` の最小値よりも大きい場合に *argument* で固定されることを除いて、`auto` と同様 (すなわち `minmax(auto, max-content)`) に計算されます。

`auto`

最大値としては、そのトラック内のアイテムの最大の `max-content` のサイズを表します。

最小値としては、そのトラック内のアイテムの最大の最小サイズ（アイテムの `min-width`/`min-height` で指定します）を表します。これは常にではありませんが、 `min-content` のサイズであることが多いです。

`minmax()` 表記の外で使用した場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、 `minmax(min-content,max-content)` と同様の動作をします。

**メモ:** トラックの寸法が `auto` の場合は、`align-content`と`justify-content`のプロパティによって引き伸ばすことができます。従って既定では、 `auto` サイズのトラックはグリッドコンテナーの残りの空間を占めます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | グリッドコンテナー |
| 継承 | なし |
| パーセント値 | コンテンツ領域の対応する寸法に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | 計算値の型による |

形式文法
----
```

grid-auto-columns =   
  <track-size>+    
  
<track-size> =   
  <track-breadth>                                   |  
  minmax( <inflexible-breadth> , <track-breadth> )  |  
  fit-content( <length-percentage [0,∞]> )            
  
<track-breadth> =   
  <length-percentage [0,∞]>  |  
  <flex [0,∞]>               |  
  min-content                |  
  max-content                |  
  auto                         
  
<inflexible-breadth> =   
  <length-percentage [0,∞]>  |  
  min-content                |  
  max-content                |  
  auto                         
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### グリッド列の寸法を設定

#### HTML


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


#### CSS


```css
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # auto-tracks |

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

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

関連情報
----

* 関連する CSS プロパティ: `grid-auto-rows`, `grid-auto-flow`, `grid`
* グリッドレイアウトガイド: グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ
* 動画チュートリアル: *Introducing Grid auto-placement and order*