使用多列布局
CSS 多列布局模組中定義的屬性擴充套件了塊佈局模式，可以輕鬆定義多列文字。如果文字行太長，人們閱讀起來會很困難。如果眼睛從一行的末尾移動到下一行的開頭需要太長時間，讀者可能會忘記他們讀到哪一行了。為了在大螢幕上閱讀文字時提供更好的使用者體驗，您應該像報紙那樣，透過並排放置文字列來限制文字的寬度。
使用列
列數和列寬
有兩個 CSS 屬性控制是否以及顯示多少列：column-count 和 column-width。
column-count 屬性將列數設定為特定數字。例如：
示例 1
HTML
<div id="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
CSS
#col {
column-count: 2;
}
結果
內容將顯示在兩列中
column-width 屬性設定最小所需列寬。如果未同時設定 column-count，則瀏覽器將自動在可用寬度內建立儘可能多的列。
示例 2
HTML
<div id="wid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#wid {
column-width: 100px;
}
結果
在多列塊中，內容會根據需要自動從一列流向下一列。所有 HTML、CSS 和 DOM 功能都在列中得到支援，編輯和列印功能也一樣。
列的簡寫
您可以使用 column-count 或 column-width。由於這些屬性的值不重疊，因此通常使用簡寫 columns 會很方便。
示例 3
在此示例中，CSS 宣告 column-width: 12em 被替換為 columns: 12em。
HTML
<div id="col_short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#col_short {
columns: 12em;
}
示例 4
在此示例中，CSS 宣告 column-count: 4 被替換為 columns: 4。
HTML
<div id="columns_4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_4 {
columns: 4;
}
結果
示例 5
兩個 CSS 宣告 column-width: 8em 和 column-count: 12 可以替換為 columns: 12 8em。簡寫中的 column-count 部分是存在的最大列數。column-width 是每列應有的最小寬度。
HTML
<div id="columns_12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_12 {
columns: 12 8em;
}
結果
假設列之間預設有 1em 的間距，如果容器寬度大於 103em（12 列 * 每列 8em 寬度 + 7 個 1em 間距），則將有 12 列，每列的寬度為 8em 或更大。如果容器寬度小於 103em，則列數將少於 12 列。如果容器寬度小於 17em（8em 列 + 8em 列 + 1em 間距），則內容將顯示為單列，沒有列間距。
高度平衡
CSS 列要求列高必須平衡：也就是說，瀏覽器會自動設定最大列高，以便每列中內容的高度大致相等。Firefox 就是這樣做的。
然而，在某些情況下，明確設定列的最大高度也很有用，然後從第一列開始佈局內容，並根據需要建立儘可能多的列，可能會溢位到右側。因此，如果高度受到限制，透過在多列塊上設定 CSS height 或 max-height 屬性，每列都可以增長到該高度，然後才新增新列。這種模式對於佈局也更高效。
列間距
列之間有一個間距。建議的預設值是 1em。可以透過將 column-gap 屬性應用於多列塊來更改此大小
示例 6
HTML
<div id="column_gap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#column_gap {
column-count: 5;
column-gap: 2em;
}
結果
總結
CSS 列是一種佈局原語，當在寬視口上檢視響應式內容時，它可以幫助使大塊文字更容易閱讀。富有想象力的開發人員可能會發現它們有很多用途，尤其是與容器查詢以及自動高度平衡功能結合使用時。