多栏布局

参考

参考自MDN：链接: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Multiple-column_Layout.

多栏布局规范为您提供了一种按列布局内容的方法，正如您在报纸上看到的那样

指定列数

        .container {
            column-count: 3;
        }

指定列宽

        .container {
            column-width: 200px;
        }

指定列间距

列于列之间的间隔：column-gap: 50px;.

指定列规则列分割线

：column-rule: 4px dotted red;.

现在添加column-rule。与您在上一课中遇到的border属性类似，column rule是列规则颜色、列规则样式和列规则宽度的简写，并接受与border相同的值。
列规则不占用布局的宽度，也就是说他是漂浮在列间隙上面的，如果要增加列与列之间的宽度需要修改列间隙而不是列规则，列规则对列之间的距离没有影响。

指定元素跨列

由上图可看出，标题2把多列布局中断了，并且该标题横跨占用了所有列的空间

避免多列折断

多列折断效果

避免页面折断后的效果
：break-inside: avoid;.