grid 布局 属性

容器属性

[列]
grid-template-columns
[行]
grid-template-rows
[行间距]
grid-row-gap
[列间距]
grid-column-gap
[行间距][列间距]缩写
grid-gap
[划分区域]
grid-template-areas
[项目排列方式]
grid-auto-flow
[项目×排列方式]
justify-items
[项目y排列方式]
align-items
(align-items,justify-items缩写)
place-items
[内容区×位置]
justify-content
[内容区y位置]
align-content
(justify-content,align-content缩写）
place-content
[多余项目宽]
grid-auto-columns
[多余项目高]
grid-auto-rows

grid-template-columns

//常规写法
grid-template-columns:100px 100px 100px
//repeat函数
grid-template-columns: repeat(3, 100px);
//列宽固定，列数不固定，autofill将会自动分配容器宽度
grid-template-columns: repeat(auto-fill,100px);
//fr代表不指定item宽度，根据列数平均分配
grid-template-columns: repeat(3, 1fr);
//minmax指定的列宽范围，最小长度150px
grid-template-columns: 1fr minmax(150px,1fr);
//auto自适应剩余宽度
grid-template-columns: 10