CSS 属性 columns 是一个简写属性，用于设置显示元素内容时要使用的列数以及这些列的宽度。
columns 是以下属性的简写:
属性值
CSS 属性columns 指定为下面列出的一个或两个值（按任意顺序）:
<'column-width'> :指定为 <length> 值或关键字 auto。实际宽度可能更宽或更窄，以适应可用空间。请参阅column-width。
<'column-count'>:指定为 <integer> 值或关键字 auto。显示要显示元素内容的列数。请参阅column-count。
适用范围
除包装器框之外的所有块容器。
语法
columns = <'column-width'> || <'column-count'> CSS columns: <'column-count'>
在以下示例中，列简写属性用于将列数设置为3列，其中没有为column-width传递任何值:
<html>
<head>
<style>
.multicol-col-rule {
columns: 3;
}
p {
background-color: bisque;
}
</style>
</head>
<body>
<h1>columns property</h1>
<div class="multicol-col-rule">
<p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！</p>
<p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html> CSS columns: auto
在下面的示例中，列简写属性用于将列数设置为 auto，column-width: 10rem:
<html>
<head>
<style>
.multicol-col-rule {
columns: 10rem auto;
}
p {
background-color: bisque;
}
</style>
</head>
<body>
<h1>columns property</h1>
<div class="multicol-col-rule">
<p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！</p>
<p>孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html> CSS columns: <'column-width'>
在以下示例中，列简写属性用于根据column-width值设置列数，没有为column-count指定直接值:
<html>
<head>
<style>
.multicol-col-rule {
columns: 15em;
}
p {
background-color: bisque;
}
</style>
</head>
<body>
<h1>columns property</h1>
<div class="multicol-col-rule">
<p>天气凉了，树叶黄了，一片片叶子从树上落下来。天空那么蓝，那么高。一群大雁往南飞，一会排成个“人”字，一会排成个“一”字。啊！秋天来了！
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html>