CSS的column-count属性怎么实现多列布局？
在网页排版中，我们经常会遇到类似报纸或杂志那种将文本分成多列显示的需求。传统的浮动（Float）或弹性盒（Flexbox）虽然也能实现类似效果，但在处理纯文本多列排版时，CSS提供的多列布局（Multi-column Layout）模块无疑是最简单、最优雅的方案。而 column-count 属性正是实现这一布局的核心。
一、什么是 column-count？
column-count 属性用于指定一个元素应该被分割的列数。浏览器会自动计算每列的宽度，以填满父容器的可用空间。它的语法非常简单：
/* 语法 */
element {
column-count: 数值 | auto;
}数值：一个正整数，指定列的数量。
auto：默认值，列数由其他属性决定（如
column-width）。
二、基础用法：文本多列排版
假设我们有一段很长的文本，想要将其分为3列显示，只需要给包含该文本的容器添加 column-count: 3 即可。
HTML结构如下：
<div class="newspaper"> <p>CSS多列布局允许我们轻松地将大段文本分成多列显示，就像传统的报纸排版一样。这种方式不仅能够有效利用页面的横向空间，还能大大提升用户的阅读体验，因为用户的视线不需要在过长的行末和下一行行首之间来回移动。通过column-count属性，我们可以指定想要分割的列数，浏览器会自动完成剩下的工作。</p> </div>
CSS样式如下：
.newspaper {
column-count: 3;
}三、完善布局：搭配其他多列属性
仅仅使用 column-count 有时会出现列与列之间挤在一起的情况，或者我们想要更美观的分割线。这就需要搭配其他多列属性来使用：
1. column-gap（列间距）
用于设置列与列之间的间距，默认值通常是 1em，但我们可以根据设计需求自定义。
.newspaper {
column-count: 3;
column-gap: 40px; /* 设置列间距为40px */
}2. column-rule（列分割线）
用于在列与列之间添加一条分割线，它的写法和 border 完全一致，包含宽度、样式和颜色。
.newspaper {
column-count: 3;
column-gap: 40px;
column-rule: 1px solid #ccc; /* 添加1像素的浅灰色实线 */
}四、进阶应用：实现瀑布流卡片布局
除了排版文本，column-count 还经常被用来实现简单的瀑布流布局。相比于传统的绝对定位瀑布流，使用多列布局代码量极少，且不需要复杂的JavaScript计算。
需要注意的是，在多列布局中，内容的排列顺序是先从上到下填满第一列，再从上到下填满第二列。同时，为了防止某个卡片被截断分到两列，我们需要使用 break-inside: avoid 属性。
HTML结构：
<div class="waterfall-container"> <div class="card">卡片1内容，高度不定</div> <div class="card">卡片2内容，高度较高</div> <div class="card">卡片3内容</div> <div class="card">卡片4内容</div> <div class="card">卡片5内容</div> </div>
CSS样式：
.waterfall-container {
column-count: 3; /* 分为3列 */
column-gap: 20px; /* 列间距 */
}
.card {
break-inside: avoid; /* 防止卡片在列中被截断 */
margin-bottom: 20px; /* 卡片底部的间距 */
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}你可以访问 www.ipipp.com 查看更多关于CSS多列布局实现瀑布流的在线演示Demo。
五、column-count 与 column-width 的区别与结合
很多初学者会混淆 column-count 和 column-width：
column-count：固定列数，浏览器自动计算列宽。column-width：规定每列的最小宽度，浏览器根据容器宽度自动计算列数。
在实际响应式开发中，我们通常会结合两者使用，或者使用简写属性 columns：
.responsive-columns {
/* 表示：每列最小宽度250px，最多分4列 */
columns: 250px 4;
/* 等同于： */
/* column-width: 250px; */
/* column-count: 4; */
}当容器宽度大于 1000px (250px * 4) 时，显示4列；当容器宽度变窄，不足以容纳4列且每列250px时，列数会自动减少，从而实现响应式布局。
六、总结
CSS的 column-count 属性为我们提供了一种极其简便的多列布局方案。对于新闻资讯类文本排版和简单的等宽瀑布流卡片，它比 Flexbox 或 Grid 更轻量、更直观。掌握 column-count、column-gap、column-rule 以及防止内容断裂的 break-inside: avoid，就能应对日常开发中绝大多数的多列布局需求。