Grid

258 阅读1分钟

属性

作用在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

align-items和justify-items属性,合纵连横

实例:jsbin.com/rayofoneti/…

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

place-items是align-self和justify-self的简写

jsbin.com/zoluxodipi/…