CSS columns

CSS 中的 columns 属性通过一个声明设置列的数量和宽度。它是一个简写属性，可以同时接受多个值。

它用于同时设置 column-count 和 column-width 属性。这两个属性都用于控制将出现多少列。column-count 属性用于设置列的数量，而 column-width 属性指定列的宽度。

同时使用 column-count 和 column-width 属性可以创建一个多列布局，该布局在狭窄的浏览器宽度下会自动断开为单列，而无需使用媒体查询。并非总是需要同时使用两者，因为它可能会限制布局的响应性和灵活性。

如果列数和宽度不适合元素的宽度，则浏览器会自动减少列数以适应指定的列宽度。

语法

值

属性值及其描述如下表所示。

如果省略了任何一个值，则默认情况下，浏览器假定相应的值为 auto。

示例

在此示例中，我们定义了两个包含文本的 <div> 元素。对于第一个 div 元素，最小宽度为 100px，最大列数为四列。而对于第二个 div 元素，最小宽度为 100px，最大列数为六列。

输出