属性
作用在grid容器上
grid-template
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写
grid-template:
"one one one one" 1fr
"two three three four" 1fr
"two three three four" 1fr
"five five five five" 1fr;
grid-template-columns
竖直方向的划分
grid-template-rows
水平方向的划分
grid-template-rows: 200px 200px;
grid-template-rows: 200px 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-rows: 20% 20% 20%;
grid-template-rows: 200px auto;
重点：fr是分数单位
grid-template-areas
网格划分区域
grid-template-areas:
"one one one one"
"two three three four"
"two three three four"
"five five five five";
grid-gap
是grid-column-gap和grid-row-gap属性的缩写,先横后竖
grid-column-gap 和 grid-row-gap
定义网格中网格间隙的尺寸
place-items
align-items和justify-items属性,合纵连横
align-items
网格元素的垂直呈现方式
start
ceter
end
stretch
justify-items
网格元素的水平呈现方式
place-content
align-content和justify-content属性缩写
justify-content
网格元素的水平分布方式
start
center
end
space-between
space-around
align-content
网格元素的垂直分布方式
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow
作用在grid子项上
grid-column、grid-row
grid-column = grid-column-start + grid-column-end,grid-row = grid-row-start + grid-row-end
grid-column-start、grid-column-end、grid-row-start、grid-row-end
子项所占据的区域的起始
grid-area
justify-self
align-self
place-self
place-items是align-self和justify-self的简写
