多列布局及网格布局

多列布局

1.column-count

规定元素分隔的行数

适用于：除table外的非替换块级元素, table cells, inline-block元素

2.column-gap

属性规定列之间的间隔大小

3.column-rules

设置或检索对象的列与列之间的边框。复合属性。

column-rule-color规定列之间规则的颜色。

column-rule-style规定列之间规则的样式。

column-rule-width规定列之间规则的宽度。

4.column-fill

设置或检索对象所有列的高度是否统一

auto：列高度自适应内容

balance：所有列的高度以其中最高的一列统一

5.column-span

设置或检索对象元素是否横跨所有列。

none：不跨列

all：横跨所有列

6.column-width

设置或检索对象每列的宽度

与column-count冲突 需要复合属性columns

7.columns

设置或检索对象的列数和每列的宽度。复合属性

<’ column-width ‘> || <’ column-count '>

aviod避免 禁止

避免当多列布局换列时内容换到下一列

break-inside:avoid；(内容显示完全再换列)

网格布局

1.设置网格属性

display:grid;

2.设置网格的宽高

列/宽度

grid-templete-columns:

行/高度

grid-templete-rows:

属性值:有多个项目就需要设置多少个属性值
- 常用的绝对单位 px
- % 百分比
- auto 自动
- 混用
- fr(自适应单位-所占的份数) fraction

宽高简写方式

grid-template:

列之间的距离

grid-column-gap:

行之间的距离

grid-row-gap:

行列距离简写方式

grid-gap:

eg:

section{
            display: grid;
            grid-template: 
            "a1 a2 a3" 1fr
            "a4 a4 a6" 1fr
            "a7 a8 a9" 1fr
            /1fr 1fr 1fr
        }
        div:nth-child(4){   
            grid-area: a4 (用于绑定grid-template 相同名称网格会进行合并)
        }