hooyantsing's Blog

P143_17_使用栅格区域部署元素

字数统计: 117阅读时长: 1 min
2020/04/20

P143 17 使用栅格区域部署元素

grid-area

相当于grid-row-start、grid-row-end和grid-column-start、grid-column-end简写到了一起。

根据线值定位

**2c34e2838f8de7a7a38a1af735a7ac87.png

**

1
2
//grid-area: 起始行/起始列/结束行/结束列
grid-area: 1/1/2/4;

根据线名定位

81c2285568d3ac86fd269443b0d21022.png

栅格容器

1
2
3
display: grid;
grid-template-rows: repeat(3,[r] 1fr);
grid-template-columns: repeat(3,[c] 1fr);

栅格元素

1
2
//grid-area: 起始行/起始列/结束行/结束列
grid-area: r 1/c 1/r 4/c 4;
CATALOG