3.32-column-duo-lan-pai-ban-mo-shi.md

3.32 Column 多欄排版模式

column-count 設定欄數

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

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 檔案，輸入以下：

<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" %}