CSS中的砌体布局

前端布局中的Flex、Grid和更古老的浮动布局，在处理不规则高度的元素时存在一定的复杂，需要用到大量的@meida，javascript来解决细节问题

砌体布局一种类似砖块堆砌的通过CSS实现的布局方式，自由排列不同高度的元素，使得页面布局更加灵活且符合实际内容的特点

砌体布局通过CSS的column-*属性来实现

columns

简写属性，设置元素的列宽和列数

也可以单独设置每个属性

column-count
    将一个元素的内容分成指定数量的列
    默认值auto，可设置为具体的正整数
column-width
    设置每一列的最小列宽，如果容器的宽度小于该值那么单列的宽度比会声明的列宽小
    值为所有CSS支持的长度单位，默认auto

column-fill

控制元素内容分成列时的每一列中内容的多少

默认auto，表示不平均分配内容到所有列

为balance表示尽可能将内容平均分配到各列

column-gap

设置元素列之间的间隔大小，值为所有CSS支持的长度单位，默认1em

column-rule

简写属性，设定列之间的分割线样式、宽度和颜色

每个属性的值与可用关键字与border属性相同

也可以单独设置每个属性

column-rule-style
    常用值：none(默认)、dotted(圆点虚线)、
    dashed(线段虚线)、solid(实线)、double(双实线)
column-rule-width
    可设置为thin(细)、medium(中)、thick(粗)
    也可以为具体的长度
column-rule-color

column-span

使一个元素跨越所有的列，默认none，可设为all来开启