CSS Columns 生成器

多列布局示例

CSS 多列布局（Multi-column Layout）是一种让内容像报纸或杂志一样分栏显示的强大方式。使用 column-count 可以指定列数，column-gap 控制列间距。

这个模块最初是为文本内容设计的，但也可以用于其他元素。你可以设置 column-rule 来添加列之间的分隔线，类似于 border 的效果。支持多种样式：实线、虚线、点线等。

当内容在不同列之间流动时，浏览器会自动处理断行和平衡。column-fill: balance 会让各列高度尽可能一致，而 auto 则按顺序填充。

你还可以使用 column-span: all 让某个横跨所有列的标题元素，这在新闻类网站中非常常见。配合响应式设计，可以创建出优雅的阅读体验。

多列布局特别适合长篇文章、产品列表、图片画廊等场景。它减少了用户滚动屏幕的次数，提高了信息密度和可读性。