> 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/3.-duo-lan-pai-ban-mo-shi-column.md).

# 3. 多欄排版模式 Column

## column-count 設定欄數

預設值是 `auto`，可設定欄數：

```css
div.block{
  column-count: 3;
}
```

例：

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

## column-fill 設定如何填滿欄

* `balance`：預設值，各欄的內容會儘可能平均。
* `auto`：內容會到達高度之後，才會到下一欄。

例：

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

## column-gap 設定欄間距

預設值是 `normal`。

例：

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

## column-rule 設定欄之間的直線樣式

跟 `border` 的屬性值寫法相同。

例：

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

## column-span 跨欄呈現

* `none`：預設值。
* `all`：設定跨欄呈現。

例：

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

## column-width 設定欄寬

設定了 `column-width`，就不建議設定 `column-count`。

例：

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

## 練習：瀑布流版型

建立 `waterfall.html` 檔案，輸入以下：

```markup
<div class="column_block">
  
  <div class="column_item">
    1
    <img src="https://dummyimage.com/300x100/ccc/aaa">
  </div>
</div>
```

然後以 `div.column_item` 為單位，多複製一些，改變內容數字`1`以及圖片寬高 `300x100`。

例：

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