: fr与atuo的区别
grid-auto-flow:
放置顺序,默认row先行后列:
row
column
row dense
column dense
dense 表示网格的自然排列启用“密集”打包算法。
grid-template-columns:
划分列(划分行 grid-template-rows 与之类似,不再赘述):
repeat(5, 200px)
repeat(5, 1fr)
repeat(5, auto)
repeat(2, 260px 90px)
repeat(auto-fill, minmax(180px, 3fr))
repeat(auto-fit, minmax(180px, 3fr))
基础格式:1fr 5fr 2fr … 。可以使用方括号,指定每一根网格线的名字,方便项目元素后面引用: [c1] 300px [c2] 2fr [c3] auto [c4]。只有一行时才能呈现auto-fill与auto-fit的区别。
justify-content:
整个网格的水平布局(左中右):
stretch
start
end
center
space-around
space-between
space-evenly
align-content:
整个网格的垂直布局(上中下):
stretch
start
end
center
space-around
space-between
space-evenly
justify-items:
单元格內容水平布局(左中右):
stretch
start
end
center
place-items 属性是 align-items 和 justify-items 属性合并简写形式。
align-items:
单元格內容垂直布局(上中下):
stretch
start
end
center
place-items 属性是 align-items 和 justify-items 属性合并简写形式。
gap:
行间距 row-gap 与 列间距 column-gap 的合并简写:
20px
10px 35px
恢复初始状态