属性
作用在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;
实例:jsbin.com/dubatudafo/…
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
实例:jsbin.com/rayofoneti/…align-items和justify-items属性,合纵连横
align-items
网格元素的垂直呈现方式
start
ceter
end
stretch
实例:jsbin.com/yuyilavano/…
justify-items
实例:jsbin.com/yujayaqaje/…网格元素的水平呈现方式
place-content
align-content和justify-content属性缩写
justify-content
网格元素的水平分布方式
start
center
end
space-between
space-around
实例:jsbin.com/qaqeboreke/…
align-content
实例:jsbin.com/hegoyopozi/…网格元素的垂直分布方式
grid-auto-columns
实例:jsbin.com/dugibozali/…grid-auto-rows
实例:jsbin.com/dohideveno/…grid-auto-flow
实例:jsbin.com/nozoxiripi/…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
实例:jsbin.com/picugaxuru/…子项所占据的区域的起始
grid-area
jsbin.com/facihoyeju/…justify-self
jsbin.com/wogivabomi/…align-self
jsbin.com/madujinoxe/…place-self
jsbin.com/zoluxodipi/…place-items是align-self和justify-self的简写