跨列和平衡列
在本指南中，我們將瞭解如何使元素在多列（multicol）容器內跨越列，以及如何控制列的填充方式。
跨越列
要使專案跨列，請使用值為 all 的 column-span 屬性。這將使元素成為一個跨列元素，跨越所有列。
多列容器的任何後代元素都可以轉換為跨列元素，包括直接子元素和間接子元素。例如，直接巢狀在容器內的標題可以成為跨列元素，巢狀在多列容器內的 <section> 內的標題也可以成為跨列元素。
在下面的示例中，<h2> 元素被設定為 column-span: all 並跨越所有列。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}
在這個第二個示例中，標題位於 <article> 元素內，但仍然按預期跨越內容。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<article>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</article>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}
當引入跨列元素時，它會中斷列的流動；列在跨列元素之後重新開始，有效地建立了一組新的列框。內容不會跳過跨列元素。
column-span 的限制
column-span 只能有兩個值。初始值 none 表示專案不跨越並保留在列內。值 all 表示專案跨越所有列。沒有值可以實現部分跨越，例如使專案跨越三列中的兩列。
需要注意的事項
如果跨列元素位於具有外邊距、內邊距、邊框或背景顏色的另一個元素內部，則該框可能會出現在跨列元素的上方，其餘內容顯示在下方。因此，在將元素設定為跨越所有列時應小心，確保考慮這種情況。
body {
font: 1.2em / 1.5 sans-serif;
}
article {
border: 1px solid red;
padding: 10px;
}
.container {
column-width: 250px;
}
h2 {
background-color: #4d4e53;
color: white;
column-span: all;
}
此外，如果跨列元素出現在內容的後面，當跨列元素之後沒有足夠的內容來建立列時，它可能會導致意外或不必要的行為。請謹慎使用跨列，並在各種斷點處進行測試，以確保獲得預期的效果。
填充和平衡列
平衡的列集是指所有列都包含大致相同數量的內容。當內容量與提供的空間量不匹配時，例如在容器上宣告 height 時，填充和平衡就變得相關。
column-fill 的初始值為 balance。balance 的值表示所有列都儘可能平衡。在分段上下文（例如分頁媒體）中，只有最後一個片段是平衡的。這意味著在最後一頁上，最後一組列框是平衡的。
另一個平衡值 balance-all 在分段上下文中平衡所有列。
此示例中的列包含影像和一些文字，它們是平衡的。無法中斷的影像位於第一列。其他列是平衡的，填充了等量的文字。
<div class="container">
<img
alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 200px;
column-fill: balance;
height: 250px;
}
column-fill 的 auto 值按順序填充列，在將內容放入後續列之前，首先填充行內起始方向的第一列，而不是平衡和平均填充所有列。在此示例中，我們將 column-fill 更改為 auto。列被填充到容器的高度，末尾留有空列。
body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 150px;
column-fill: auto;
height: 250px;
}
後續步驟
在下一個指南中，你將學習 多列布局如何處理列內溢位 以及當列數超出容器容納範圍時如何處理。