![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ec85d39378f179c9bbb533adb4bfa5a2.png#pic_center)
容器属性
[列]
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