多列布局的基本概念
多列布局，通常稱為 multicol 佈局，是一種將內容佈局到一組列框中的規範，就像報紙中的多列一樣。本指南將透過一些常見用例示例來解釋該規範的工作原理。
關鍵屬性
Multicol 佈局與 CSS 中的其他任何佈局方法都不同；它將內容（包括所有後代元素）分段到列中。這與我們使用CSS 分頁媒體建立列印樣式表時，內容被分段到頁面中的方式相同。
在本指南及後續指南中，我們將討論 CSS 多列布局模組中定義的以下屬性
定義列
透過向元素新增 column-count 或 column-width 屬性，或使用 columns 簡寫，該元素將成為一個多列容器或簡稱 multicol 容器。這些列是匿名框；它們在規範中被描述為列框。
指定列數
column-count 屬性指定你希望內容顯示的列數。然後瀏覽器將為每個列框分配正確的空間量，以建立所需的列數。
在下面的示例中，我們使用 column-count 屬性在 .container 元素上建立三列。然後，內容（包括 .container 的子元素）將在三列之間分割。
<div class="container">
<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 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-count: 3;
}
在上面的示例中，內容被包裹在帶有預設樣式的段落 <p> 標籤中。因此，每個段落上方都有一個外邊距。你可以看到這個外邊距如何導致第一行文字下移。這是因為多列容器會建立一個塊級格式化上下文 (BFC)，因此子元素上的外邊距不會與容器上的任何外邊距發生摺疊。
指定列寬
column-width 屬性用於設定每個列框的最佳寬度。如果你聲明瞭一個列寬，瀏覽器將計算出有多少該寬度的列可以容納在多列容器中，並將任何額外空間平均分配給這些列。因此，列寬應被視為最小寬度，因為列框可能會因額外空間而更寬。
在單個列中，如果可用寬度小於 column-width 的值，則列框將收縮，使其小於宣告的列寬。
在下面的示例中，column-width 屬性設定為 200px。我們將獲得儘可能多的 200 畫素列，以適應容器，並平均共享額外空間。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
}
同時指定列數和列寬
如果你在多列容器上同時指定這兩個屬性，那麼 column-count 將作為最大列數。因此，將發生 column-width 所述的行為，直到達到 column-count 中的列數。在此之後，將不再繪製更多列，並且額外空間將均勻分佈在現有列之間，即使有足夠的空間容納指定 column-width 大小的更多列。
當同時使用這兩個屬性時，你可能會獲得比 column-count 值中指定的列數更少的列。
在下一個示例中，我們使用 200px 的 column-width 和 2 的 column-count。即使有空間容納兩列以上，我們也只得到兩列。如果空間不足以容納兩列，每列至少 200 畫素，我們只得到一列。
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 2;
column-width: 200px;
}
列屬性的簡寫
你可以使用 columns 簡寫來設定 column-count 和 column-width 值。如果你指定一個長度單位，該值將用於 column-width，如果你指定一個整數，該值將用於 column-count。你可以設定這兩個屬性，用空格分隔這兩個值。
此 CSS 將產生與第一個示例相同的結果，column-count 設定為 3。
.container {
columns: 3;
}
此 CSS 將產生與第二個示例相同的結果，column-width 為 200px。
.container {
columns: 200px;
}
此 CSS 將產生與第三個示例相同的結果，column-count 和 column-width 都已設定。
.container {
columns: 2 200px;
}
後續步驟
在本指南中，我們學習了多列布局的基本用法。在下一個指南中，我們將探討我們能如何樣式化列本身。