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