📰 CSS多栏布局

👁️ 预设效果

⚙️ 参数调整

column-count (栏数)3
column-gap (间距)20px
column-rule-width (分割线宽度)1px

👁️ 实时预览

CSS多栏布局(CSS Multi-column Layout)是一种强大的布局方式,可以将内容自动分配到多个列中,类似报纸或杂志的排版效果。它非常适合长文章、新闻列表等需要紧凑展示大量文本的场景。

使用column-count属性可以指定栏数,column-gap控制栏间距,column-rule添加分割线样式。浏览器会自动计算每栏的宽度,并确保内容在各栏之间均匀分布。

多栏布局的优点是实现简单、无需JavaScript、响应式友好。缺点是不支持在栏之间放置图片,且内容流向固定为从上到下、从左到右。在需要更复杂的网格布局时,可以考虑CSS Grid。

实际应用中,多栏布局常见于新闻网站、杂志风格页面、产品手册等场景。配合column-break属性,还可以控制分栏时的断行行为。

💻 CSS代码