CSS 多栏生成器，免费

CSS 多列布局是什么

CSS 多列布局（W3C「CSS Multi-column Layout Module Level 1」规范）将单个元素的内容自动重新分配到两列或更多列，就像几个世纪以来报纸和杂志印刷处理长文本的方式。你声明想要多少列（或每列应有多宽），浏览器便从上到下、从左到右分配内容，平衡各列的行数，使每列大致在同一高度结束。该模块于 2011 年 4 月成为 W3C 候选推荐标准，并在 Firefox 3.5（2009 年 6 月）至 IE 10（2012 年 10 月）之间以可用形式登陆各浏览器。它已是Web 平台十多年的基线特性。与 Flexbox 或 Grid 不同（后者将离散的子元素对齐到已知位置）多列布局把内容视为单一连续的流，由浏览器根据可用高度切分成若干列。

CSS 列何时是合适的工具

• 宽屏上的长篇文章正文。阅读单列文本宽度超过约 75 个字符会让眼睛疲劳，读者的视线必须移动太远才能找到下一行的开始。两列布局在使用同等垂直空间的情况下将行长减半，在宽屏显示器上极大改善可读性。
• 定义列表和词汇表。由短条目组成的长字母排序列表自然地分布到多列，无需手动平衡。
• 页脚链接列表。带数十个链接的经典「站点地图」式页脚（分类向下、链接横向）天然适配 column-count。
• 功能列表和项目列举。在单列中会无尽滚动的长列表，在两列或三列中读起来要好得多。
• 打印样式表。多列布局是少数能完美翻译到纸面的 CSS 特性之一，这正是报纸自被发明以来一直采用的格式。

column-count 与 column-width，最重要的区别

指定列的两种方式，对响应式设计来说选择很重要。column-count: 3 硬编码三列（在任何视口宽度下，浏览器都会精确产生三列，并随着容器变窄而变得更窄。在手机上，三列会变成无法阅读的细长条。column-width: 250px 则要求列「至少 250 像素宽」；浏览器会计算容器中能容纳多少列，并在视口变化时自动重排。宽屏获得许多列，窄屏获得少数或一列）无需任何媒体查询。组合模式是现代最佳实践：columns: 250px 4（column-width 加 column-count 的简写）意味着「列宽 250 像素，但永远不超过 4 列」。浏览器在宽桌面上产生 4 列，在平板上更少，在手机上一列，自动响应式。绝大多数生产 CSS 因其稳健性而使用这种组合形式。

控制内容在何处断开

默认情况下浏览器会在落到的位置断开列（这有时会把标题与第一段分开，或把卡片切成两半。CSS 属性 break-inside: avoid（CSS Fragmentation Module Level 3）告诉浏览器「不要把这个元素跨列分割」）通常应用于卡片、图形和任何应保持在一起的内容。break-before: column 在元素之前强制列断开，对「让每个章节在新列中开始」很有用。column-span: all 让标题或要点横跨所有列的全部宽度，突破列流，多列正文上方的文章标题就常用此方式。

需要留意的陷阱

多列布局有些值得了解的微妙交互。屏幕阅读器的阅读顺序遵循 DOM 顺序，通常与视觉上从上到下的列顺序一致（但辅助技术在复杂布局上偶尔会出现混乱。多列下的打印分页可能在跨页时产生奇怪的列平衡；如果在意纸面输出，请用打印样式表测试。长内容向下填充）如果你给多列容器一个比内容所需更短的固定高度，内容会溢出；如果不限制高度，浏览器会把列平衡到大致相等的长度。锚定内容（表单、需要保持在一处的交互元素）在列中表现不佳，因为用户无从知道该看哪里。同层级混用 Grid 或 Flexbox会产生不可预测的结果，每个容器只选一种布局方法。

生成的 CSS 属性

• column-count，明确的列数（固定值，不随视口自适应）
• column-width，最小列宽（浏览器计算能容纳多少列，完全响应式）
• column-gap，列之间的水平间距；默认 1em 通常已经够用
• column-rule，列之间的装饰性垂直线（宽度、样式、颜色，类似边框）
• column-span: all，应用于标题或要点，使其横跨所有列的全部宽度