使用多列布局
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 列是一种布局原语，当在宽视口上查看响应式内容时，它可以帮助使大块文本更容易阅读。富有想象力的开发人员可能会发现它们有很多用途，尤其是与容器查询以及自动高度平衡功能结合使用时。