前言

Multi-column布局是一种CSS布局技术，用于将内容分割为多个列进行显示。它通过将元素容器定义为多列容器，并设置列的数量、宽度和间距来实现。

多列布局属性 测试地址

• column-count: 指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。
• column-width: 用于给每列设置一个最佳宽度。如果你声明 column-width,浏览器将算出 该宽度在 multicol 容器能分多少列，并且把额外的的空间填充到这些列当中。因此，应将列宽视为最小宽度，因为由于额外的空间，列可能而更宽。
• column-gap: 用来设置元素列之间的间隔
• row-gap: 用来设置元素列之间的间隙
• gap: 用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式。
• column-fill: 控制元素的内容在设置了列时的展示方向
• column-span: column-span 的值被设置为 all 时，可以让一个元素跨越所有的列
• column-rule: 可以在多列布局中设定分割线的宽度、样式和颜色。
• columns: 用来设置元素的列宽和列数。

说明

为了保证浏览器最大的兼容性问题：我们可以在这些属性前加上前缀：-webkit-,-moz-,-ms-。

多列布局属性实现瀑布流