分栏布局将区域划分为若干垂直的栏，子元素放置到栏中，填满一个后再填充下一个。如果设置了 column-count 栏数量或 column-width 栏宽度，元素就成为分栏容器。需要注意， column-width 实际上是最小栏宽度。浏览器使用这个值计算栏的数量，如果还有额外的空间，浏览器会增加栏的实际宽度。
如果内容不能填满所有栏，可以使用 column-fill 属性，将内容优先填满靠左侧的栏，或者平均分配到每个栏中。
代码1 column-fill属性
column-fill: auto; /* 内容优先填充靠左侧的栏。 */
column-fill: balance; /* 内容平均分配到每个栏中。 */各栏之间的距离通过 column-gap 属性控制。
代码2 column-gap属性
column-gap: 8px;
column-gap: 10%;栏与栏之间存在一条界线，和边框、轮廓一样，它也有3个样式属性和属性简写：
代码3 column-rule-*
column-rule-color: red; /* 界线色彩。 */
column-rule-style: dotted; /* 界线风格。 */
column-rule-width: 12px; /* 界线宽度。 */
column-rule: solid 6px blue; /* 属性简写。 */如果希望分栏容器中的某个子元素跨越所有的栏，可以将子元素的 column-span 属性设置为 all 。
CSS为分栏属性提供了简写：
代码4 columns简写
columns: 20em; /* column-width: 20em; */
columns: 2; /* column-count: 2; */
columns: 2 auto; /* column-count: 2; column-width: auto; */
columns: auto 12em; /* column-count: auto; column-width: 12em; */