> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/css-animation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/css-animation/2.-grid-pai-ban-mo-shi/grid-pai-ban-container.md).

# 2.2 Grid 排版 - Container

## Container 相關屬性 - 1

### grid-template-columns 設定各欄寬度

設定 3 欄，每欄寬度自動分佈：

```css
grid-template-columns: auto auto auto;
```

設定 2 欄，第一欄寬度是 100px，第二欄寬度是 150px：

```css
grid-template-columns: 100px 150px;
```

例：

{% embed url="<https://codepen.io/carlos411/pen/bGgewoj>" %}

### grid-template-rows 設定各列高度

設定第一列的高度為 100px，第二列的高度為 150px：(註：大部份情況，高度應由內容來撐)

```css
grid-template-rows: 100px 150px;
```

例：

{% embed url="<https://codepen.io/carlos411/pen/WNRxGzL>" %}

### grid-auto-flow 設定流向

{% hint style="info" %}
需先瞭解 `grid-column` 及 `grid-row`，才能瞭解 `dense` 部份。
{% endhint %}

* `row`：預設值，設定 Items 沿著 row 的方向依序出現。
* `column`：設定 Items 沿著 column 的方向依序出現。
* `row dense`：加上 dense 會讓 Items 遞補。
* `column dense`：加上 dense 會讓 Items 遞補。

例：

{% embed url="<https://codepen.io/carlos411/pen/xxgOEJE>" %}

### grid-auto-rows 設定各列預設高度

各列高度由 `grid-template-rows` 來設定，

**其它列沒有指定到高度的**，如下範例，第一個列設定 200px，下一個列設定 300px，再下一列會是 200px，以此類推：

```css
grid-auto-rows: 200px 300px;
```

例：

{% embed url="<https://codepen.io/carlos411/pen/NWdrRJJ>" %}

### grid-auto-columns 設定各欄預設寬度

各欄寬度由 `grid-template-columns` 來設定，

**其它欄沒有指定到寬度的**，如下範圍，第一個欄設定 120px，下一個欄設定 180px，再下一欄會是 120px，以此類推：

```css
grid-auto-columns: 120px 180px;
```

例：

{% embed url="<https://codepen.io/carlos411/pen/rNjLMgx>" %}

## Container 相關屬性 - 2

### grid-template-areas 排版

{% hint style="info" %}
需先瞭解 `grid-area`，才能瞭解 `grid-template-areas` 部份。
{% endhint %}

用途：

1. 在 Grid Items 使用 **`grid-area`** 來設定各個 Item 的名稱。
2. 然後就可以在 Grid Container 中使用 **`grid-template-areas`** 來做排版。

`grid-template-areas` 的語法：

* 以雙引號(單引號也可)當做是一個列，然後如果要表達下一個列，那就再使用雙引號，各列的雙引號以空格做區隔。
* 有一個符號是 **`.`**，代表的意思是沒有名稱的 Grid Item。

例 1：

{% embed url="<https://codepen.io/carlos411/pen/WNRxpqW>" %}

### grid-template 簡寫形式

例1：

```css
grid-template-columns: auto auto auto;
grid-template-rows: 100px 150px;
/* 等同於 */
grid-template: 100px 150px / auto auto auto;
```

例2：

```css
grid-template-areas: "header header header" "aside main section" "aside footer footer";
/* 等同於 */
grid-template: "header header header" "aside main section" "aside footer footer";
```

{% embed url="<https://codepen.io/carlos411/pen/abpZWwy>" %}

### grid 簡寫形式

```css
grid-template-columns: auto auto auto;
grid-template-rows: 100px 150px;
/* 等同於 */
grid-template: 100px 150px / auto auto auto;
/* 等同於 */
grid: 100px 150px / auto auto auto;
```

```css
grid-template-areas: "header header header" "aside main section" "aside footer footer";
/* 等同於 */
grid-template: "header header header" "aside main section" "aside footer footer";
/* 等同於 */
grid: "header header header" "aside main section" "aside footer footer";
```

```css
grid: auto-flow 100px / 1fr 100px;
/* 等同於 */
grid-template-columns: 1fr 100px;
grid-auto-flow: row;
grid-auto-rows: 100px;


grid: auto-flow dense 100px / 1fr 100px;
/* 等同於 */
grid-template-columns: 1fr 100px;
grid-auto-flow: row dense;
grid-auto-rows: 100px;
```

```css
grid: 100px 300px / auto-flow 100px;
/* 等同於 */
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 100px;


grid: 100px 300px / auto-flow dense 100px;
/* 等同於 */
grid-template-rows: 100px 300px;
grid-auto-flow: column dense;
grid-auto-columns: 100px;
```

例：

```css
grid-template-rows: 100px 200px 300px;
grid-template-columns: auto auto auto;
grid-template-areas: "header header header" "aside main section" "aside footer footer";
/* 等同於 */
grid: "header header header" 100px "aside main section" 200px "aside footer footer" 300px / auto auto auto;
```

{% embed url="<https://codepen.io/carlos411/pen/LYxZyrr>" %}

### repeat() 與 minmax() 函式與 fr 單位

第一個參數：表示「第二個參數的內容」，要重覆幾次。例：

```css
grid-template-columns: repeat(3, 100px);
/* 等同於 */
grid-template-columns: 100px 100px 100px;
```

第一欄的寬度是 100px \~ 200px，例：

```css
/*
  三欄
  第一欄的寬度是 100px ~ 200px；
  第二欄的寬度是 100px；
  第三欄的寬度是 100px。
*/
grid-template-columns: minmax(100px, 200px) 100px 100px;
```

**`fr`** 是 fraction of the free space，也就是剩餘空間，以比例方式來分配，例：

```css
/*
  三欄：
  第一欄的寬度是 剩餘空間的 3/4；
  第二欄的寬度是 100px；
  第三欄的寬度是 剩餘空間的 1/4。
*/
grid-template-columns: 3fr 100px 1fr;
```

{% embed url="<https://codepen.io/carlos411/pen/WNoBWML>" %}

## Container 相關屬性 - 3

### column-gap 設定各欄間距

```css
column-gap: 10px;
```

{% hint style="info" %}
`grid-column-gap` 在 CSS3 中，已更名為 `column-gap`。
{% endhint %}

### row-gap 設定各列間距

```css
row-gap: 20px;
```

{% hint style="info" %}
`grid-row-gap` 在 CSS3 中，已更名為 `row-gap`。
{% endhint %}

### gap 簡寫形式

```css
gap: 20px 50px; /* 第一個指的是 row-gap；第二個指的是 column-gap */
```

{% hint style="info" %}
`grid-gap` 在 CSS3 中，已更名為 `gap`。
{% endhint %}

例：

{% embed url="<https://codepen.io/carlos411/pen/eYgzWbE>" %}

## Container 相關屬性 - 4

### justify-items 沿著 Row Axis 排列

設定 Items 沿著 `Row(Inline) Axis` 來排列。

可設定的屬性值有：

* **`stretch`**：預設，**寬度**填滿整個 Cell。
* **`start`**：設定 Item 在自己 Cell 的左邊。
* **`end`**：設定 Item 在自己 Cell 的右邊。
* **`center`**：設定 Item 在自己 Cell 的中間。

例：

{% embed url="<https://codepen.io/carlos411/pen/RwKRgEa>" %}

{% hint style="info" %}
`justify-self` 是在 Grid Items 上設定，只作用於 Item 自己。
{% endhint %}

### align-items 沿著 Column Axis 排列

設定 Items 沿著 `Column(Block) Axis` 來排列。

可設定的屬性值有：

* **`stretch`**：預設，**高度**填滿整個 Cell。
* **`start`**：設定 Item 在自己 Cell 的上方。
* **`end`**：設定 Item 在自己 Cell 的下方。
* **`center`**：設定 Item 在自己 Cell 的中間。

例：

{% embed url="<https://codepen.io/carlos411/pen/ExNqymR>" %}

{% hint style="info" %}
`align-self` 是在 Grid Items 上設定，只作用於 Item 自己。
{% endhint %}

### place-items 簡寫形式

是 `justify-items` 和 `align-items` 的簡寫形式，格式如下：

```css
place-items: <align-items> <justify-items>;
```

{% hint style="info" %}
`place-self` 是在 Grid Items 上設定，只作用於 Item 自己。
{% endhint %}

## Container 相關屬性 - 5

### justify-content 沿著 Row Axis 排列

全部的 Items，一起沿著水平方向 `Row(Inline) Axis` 的排列，可以設定的屬性值有 7 個，如下：

* **`stretch`**：預設值。
* **`start`**：置左。&#x20;
* **`end`**：置右。&#x20;
* **`center`**：置中。
* **`space-around`**：Grid Items 之間的距離會是最左邊、最右邊的兩倍大。
* **`space-between`**：Grid Items 最左邊會靠左、最右邊會靠右，其餘距離均分。
* **`space-evenly`**：Grid Items 之間的距離及最左邊、最右邊，距離都是相同的。

例：

{% embed url="<https://codepen.io/carlos411/pen/yLavPNz>" %}

### align-content 沿著 Column Axis 排列

全部的 Items，一起沿著垂直方向 `Column(Block) Axis` 的排列，可以設定的屬性值有 7 個(與 `justify-content` 屬性相同)，如下：

* **`stretch`**：預設值。
* **`start`**：置頂。
* **`end`**：置底。&#x20;
* **`center`**：置中。
* **`space-around`**：Grid Items 之間的距離會是最上方、最下方的兩倍大。
* **`space-between`**：Grid Items 最上方會置頂、最下方會置底，其餘距離均分。
* **`space-evenly`**：Grid Items 之間的距離及最上方、最下方，距離都是相同的。

例：

{% embed url="<https://codepen.io/carlos411/pen/yLavPOP>" %}

### place-content 簡寫形式

是 `justify-content` 和 `align-content` 的簡寫形式，格式如下：

```css
place-content: <align-content> <justify-content>;
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webmix.cc/css-animation/2.-grid-pai-ban-mo-shi/grid-pai-ban-container.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.