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: 100px auto 100px;
//划分区域
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i'
//不关心的部分可以用.代替
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i'


grid-auto-flow

//纵排
grid-auto-flow: column
//横排
grid-auto-flow: row
横排空间放置放得下的元素
row dense

justify-items / align-items / place-items

justify-items: start | end | center | stretch | space-aroud | space-between | space-evenly;
place-items: center | center;

容器内容区的对齐方式
justify-content / align-content

justify-content: start | end | center | stretch | space-aroud | space-between | space-evenly；

grid-auto-columns / grid-auto-rows
//用来设置多出来的项目宽高
grid-auto-rows: 50px;

项目属性
grid-column-start
grid-column-end
(grid-column-end,grid-column-start缩写）
grid-column

grid-row-start
grid-row-end
(grid-row-start,grid-row-end缩写)
grid-row

grid-area
justify-self
place-self
(align-self，justify-self缩写）
align-self

//根据网格线，从第一根，到第三根
grid-column-start: 1;
grid-column-start: 3;
grid-column: 1/3;
//从开始方向，跨两条网格线
grid-column-start: span 2;
//从末尾方向，向开始方向，跨两条网格线
grid-column-end: span 2;
//对应容器属性grid-template-area设置的区域
grid-area: a;
还可以作为以上项目属性grid-column-start，
//grid-column-end, grid-row-start,
//grid-row-end合并的简写形式，直接指定
//项目位置
grid-area: 1/1/3/3;