2025年多列布局及网格布局

科技前沿 • 2025-02-18 10:56 • 阅读 32

大家好，我是讯享网，很高兴认识大家。

多列布局

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 相同名称网格会进行合并) }

2025年多列布局及网格布局

多列布局

网格布局

相关推荐