首页 › 前端工具 › CSS多列布局
CL

CSS多列布局

可视化调整column-count、column-gap、column-rule参数,实时预览多列布局效果

功能CSS 多列布局生成器
属性column-count / gap / rule
分割线宽度和颜色可调
输出实时预览 + CSS 代码
多列预览3 列
生成的 CSS 代码0 字符

CSS 多列布局生成器说明

CSS 多列布局(CSS Multi-Column)可将内容自动分为多列显示,类似报纸和杂志的排版效果。

column-count:指定列的数量,内容会自动在列间分配。

column-gap:设置列与列之间的间距。

column-rule:列之间的分割线,由宽度、样式和颜色组成,类似于 border 属性。

前端工具