hooyantsing's Blog

P139_13_重复栅格的命名技巧

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

P139 13 重复栅格的命名技巧

grid-template-rows:repeat(个数,[起始线名] 高度 [结束线名])

grid-template-columns:repeat(个数,[起始线名] 宽度 [结束线名])

例:

0baff3493d15ac7b8f64396420c6aec7.png

命名

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

引用

参数:起始线名/结束线名 第几行/列

1
2
3
4
grid-row-start: r-start 1;
grid-row-end: r-end 1;
grid-column-start: c-start 1;
grid-column-end: c-end 3;
CATALOG