hooyantsing's Blog

P138_12_栅格固定命名放置元素

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

P138 12 栅格固定命名放置元素

grid-template-rows:[第一行起始线名] 高度 [第一行结束线名 第二行起始线名] 高度 [第二行结束线名]

grid-template-columns:[第一列起始线名] 宽度 [第一列结束线名 第二列起始线名] 宽度 [第二列结束线名]

例:

4631c037f2ffef30500988759c906e3d.png

命名

1
2
grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];

引用

1
2
3
4
grid-row-start: r1-start;
grid-row-end: r1-end;
grid-column-start: c1-start;
grid-column-end: c2-end;
CATALOG