Multiple-column layout

多列布局

指定三列布局

.container {
  column-count: 3; //三列布局
}

通过设置列宽来分列

.container {
  column-width: 200px; //列宽
}

浏览器会尽可能多的分200px的列。

给多列参加样式

Multicol 创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法，同样无法为某一特定的列设置独特的背景色、文本颜色。你有两个机会改变列的样式：

• 使用 column-gap 改变列间间隙。
• 用 column-rule 在列间加入一条分割线。

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
}

但是这条分割线不占宽度。它置于用column-gap创建的间隙内。

列与内容折断

如图，需要在内容中设置break-inside: avoid;。增加旧属性page-break-inside来增加更好的浏览器支持。

例如：

.cards {
  column-count: 3;
}

.cards li {
  margin: 0;
  break-inside: avoid;
}

而在第一个选择器中设置break-inside就不起作用。