IE10+浏览器均支持分栏布局。各个分栏是等宽的。
分栏的每栏高度不总是相等的，内容的分割也不总是均匀的，各个浏览器的算法也会有不同，展示效果也会各有差异。
分栏布局有个优点：不会改变元素原本的display计算值。比如为ul设置 columns:2; 那么li仍是列表项，list-style还跟原来一样。
columns 属性
columns 属性是 column-width 和 column-count 两个属性的缩写。它的属性值可以出现任意一项或两项一起出现。
column-width
可以设置为一个固定的长度值，需要注意的是这里不能设置为百分比。
所设置的值更像一个期望的尺寸，浏览器会根据这个值计算分栏数目，计算之后这个值的使命就完成了，所以最终的分栏宽度往往跟所设置的值会有所不同。
column-count
可以设置为分栏的数量。也可设置为auto。
同时设置两个参数
两个参数顺序可以随意。当设置了两个参数的情况下，浏览器会先将两个值统一转化成分栏数，哪个结果小，就最终采用哪个值。
column-gap 属性
用以设置栏间距，可以是具体的长度值，也可以是百分比值。
在不考虑IE浏览器的情况下，也可以用【gap】属性来替代column-gap。gap属性是CSS规范为了统一flex、grid、column等布局方式的间隙设置而新增的新属性。
column-rule 属性
column-rule 其实是 column-rule-width，column-rule-style，column-rule-color 这三个属性的缩写。类似border属性。
用于设置分栏线的样式。
column-span 属性
用来设置某一个内容是否可以跨多栏显示。有点类似表格里面的colspan。不过这个值仅可以设置为 none 或者 all。更像一个开关，不可指定跨的栏数。
Demo
https://demo.cssworld.cn/new/6/1-4.php
在demo中可以看到chrome下有个bug，左下角有一个原因不明的神秘空间，P元素上边距设置为0后，此空间消失。Firefox没有这个问题。
另外从这个demo中可以看到，第一个元素的上边距无法参与分栏计算，所以会多出一个空白区域。
column-fill 属性
默认值为：balance。意思是保持各栏内容的平衡，除了最后一栏有时内容会较少。
还可以设置为：auto，意思是优先填充前面的列。可想而知这种情况需要提前设置好容器元素的高度值。
还有一个值：balance-all，意思是全面平衡，不过没有任意浏览器支持这个值。忽略即可。
break-inside 属性
该属性用于定义一个元素在【打印分页】、【分栏布局跨列】的情况下是否可以进行分割。
auto：可分割
avoid：不可分割
设为不可分割的情况下，元素会整体移至下一列显示。
box-decoration-break 属性
【盒子装饰拆分属性】该属性可以用于控制如下场景：（IE/Edge完全不支持）
- 行内元素换行（chrome目前仅支持这种场景）
- 元素内分栏
- 打印分页
设置为 slice（默认值）：意思是分割。比如一个圆角矩形（4 4 4 4）会被切割成一个（4 4 0 0）一个（0 0 4 4）。
设置为 clone：意思是各自拥有完成的装饰。一个圆角矩形（4 4 4 4）会被切割成两个（4 4 4 4）。