多列布局

①多列布局
column-count 将创建指定数量的列：

.container {
  column-count: 3;
}

column-width将改变每一列的宽度

.container {
  column-width: 200px;
}

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

column-width: 200px;
  column-gap: 20px;

column-rule 是 column-rule-color 和 column-rule-style的缩写，接受同 border 一样的单位。

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

②列与内容折断
这份规范提供了一些属性来控制 multicol 和多页媒体中的内容拆分、折断。比如， 在规则 .card 上添加属性break-inside，并设值 avoid .card 是标题和文本的容器，我们不想拆开这个盒子。

 break-inside: avoid;
  page-break-inside: avoid;