CSS 列布局

CSS 列布局是一种简单而灵活的方式，用于在页面中添加多栏文本。这在使用响应式设计时特别有用，因为容器元素的宽度可能会随屏幕变化而改变。传统的手动实现方式需要人为控制文本长度，并将其固定在一个元素中，通过空格位置来强行拆分文本为多个标签，这种方式并不基于内容本身。而 CSS 列布局则能自动将内容按需拆分为多列，无需关心列之间的分割点，使布局更加灵活和响应式。

末日列布局

column-count：设置期望的列数。虽然具体应用场景不同，但建议最多使用三列，除非屏幕特别宽或有明确的设计需求。较短的行宽通常更利于阅读，但如果过短，读者视线在行间跳跃频繁，容易疲劳。列数过多也会增加视觉干扰，影响注意力集中。

1.horde-layout-columns {
2    column-count: 3;
3}

可尝试的实验：

1. 将列数改为 2。
2. 现在尝试设为 7。
3. 它是否接受 0 或负数值？试试 100 会怎样？

亡灵列：间距、宽度、分隔线与跨列

column-gap：设置列之间的间距。确保间距足够大，避免读者因未读到的列而分心。分心的读者会让僵尸得逞。

1.horde-layout-columns {
2    column-gap: 1em;
3}

column-rule：在列之间设置一条类似边框的分隔线。其用法与边框类似，包含三个属性值：颜色、样式和宽度。也可以分别使用 column-rule-color、column-rule-style 和 column-rule-width 单独设置。可用的样式与边框一致。虽然可以设计得非常花哨，但简洁清晰通常是最佳选择。过于复杂的分隔线反而会降低可读性，当然，这也意味着让僵尸赢了。

1.horde-layout-columns {
2    column-rule: #0DEAD0 3px solid;
3}

column-span：允许某个元素跨越多列（要么跨全部列，要么不跨）。这在需要让图片、标题、图表、表格或“对抗僵尸”的图示标签跨越多列时非常有用，可以创建新的区块，增强主题清晰度和视觉重点。

1.undead-column-item {
2    column-span: all;
3}

column-width：设置多列的最小宽度。浏览器会尽可能多地排列列，每列至少达到设定宽度，并将剩余空间均匀分配给现有各列。

1.horde-layout-columns {
2    column-width: 5em;
3}

可尝试的实验：

1. 改变 column-gap 的单位，尝试 10%、5vw、10px 等。
2. 如果分隔线比间距还宽，会发生什么？
3. 尝试不同的分隔线样式，如 dotted、dashed、inset。
4. 改变 column-width 后观察内容如何重新分布。
5. 当将 .undead-column-item 的 column-span 改为 none 时，内容又会如何变化？

亡灵列群

columns：是 column-count 与 column-width 的快捷属性。

1.horde-layout-columns {
2    columns: 3 400px;
3}

可尝试的实验：

1. 如果省略列数，会发生什么？
2. 如果省略列宽，又会怎样？
3. 尝试不同的数值和单位组合。