CSS3的多栏布局不仅用于文字排版，还能实现古书样式、九宫格等创新设计。通过column-width、column-count、column-rule等属性，可以创建灵活的多栏效果，但在实际应用中可能受限于样式调整和子元素间距影响。虽然不及flex布局广泛，但多栏布局在某些场景下展现出独特价值。
多栏布局是CSS3新增布局中的一种，尽管它很低调。
一、明确结构
多栏布局的结构很简单，主要由multi-column container和column box组成。
当一个元素设置了column-width和column-count属性并且值不为auto，那么这个元素就是multi-column container。
multi-column container内部通过多个column box来展示内容。
二、了解基本用法
1、column-count和column-width
通过这两个属性，我们可以控制分栏的数目，但是相比较count属性，width属性就显得很灵活。
当设置width属性之后，并不是说分栏的宽度就是这个固定的值，它还会结合分栏布局容器中的宽度灵活的多增少减。
2、column-rule和column-gap
这两个属性主要帮助我们设置分栏之间的间隙以及分栏的样式，还是比较好理解的：
这里你可以将column-rule的宽度设置的大一些，会有惊奇的发现哦。
3、column-span
这个属性和table中的span属性差不多，但是它只有none和all两个值，并且它前后的内容都得按照分栏布局规则重新排列。
三、浅谈应用
掌握基础结构和用法之后，现在可以对一篇文章进行漂亮的排版了：
最低0.47元/天 解锁文章
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
