CSS分栏布局

分栏布局

分栏布局提供了一种将内容按列排列的方法，就像在报纸上看到的那样。但是创建的列不能单独设置样式，无法使一列比其他列大，或更改单个列的背景或文本颜色。

分栏布局案例

其中：

1. column-count 属性用来设置列的数量。浏览器可以计算并分配每个列的空间。
2. column-width 属性用来指定列的宽度。浏览器将为提供指定大小的列。然后，剩余的空间将在现有列之间共享。
3. column-gap 属性用来更改列之间的间距大小。
4. column-rule 属性用来指定列之间的边框，接受同border的值。
5. column-span 属性可以实现元素跨越所有栏。值为none和all。多栏会中断，并在跨栏元素之后继续创建新的列框集。

还可以使用break-inside:avoid的属性，控制多栏之间内容的中断方式。

参考资料

1. https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout