CSS 网格布局(grid)-命名线布局(四)

• 在前面的文章中我们使用网格线和网格区域各自实现了效果
• 本文我们将会把这两种方式做一个结合, 使用更高级的用法

命名网格线

• 还记得 grid-template-rows 和 grid-template-columns 的用法吗?
• 其实他们还有更高级的用法, 在定义网格时定义网格线, 我们来做个示例:

display: grid;
/* grid-template-columns: repeat(3, 1fr); */
grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four];
grid-template-rows: [one] 40px [two] 40px [three] 40px [four];

.child {
    grid-column: two / four;
    grid-row: one / three;
}

• 我们把 grid-template-columns: repeat(3, 1fr); 的写法改成 grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four];
• 这样我们就使用中括号 [] 把线的名称定义为了 one two three four 4 个新名称,
• 如果我们要设置多个名称, 可以用空格分割, 如: [a1 a2]
• 当你对线进行命名时, 你依然可以使用数组找到. 如: grid-template-columns: [one] 1fr; 使用 one 和 1 是等价的

隐式网格区域

• 在选择名字时，如果把一个区域周围的线都用 -start 和 -end 作为后缀, 网格就会为区域创建一个名字

display: grid;
grid-template-columns: 1fr [child-start] 1fr 1fr [child-end];
grid-template-rows: [child-start] 40px 40px [child-end] 40px;

.child {
    grid-area: child;
}

网格区域隐式定义的命名线

display: grid;
gap: 2px;
grid-template:
    "c1 c2 c3 c3" minmax(60px, auto)
    "c4 c5 c3 c3" minmax(60px, auto)  
    / 1fr 1fr 1fr 1fr;

.one {
    grid-area: c1;
}
/* ... */
.five {
    grid-area: c5;
}

.cover {
    background-color: #834BF2;
    grid-column: c1-end / 4;
    grid-row: c2-start / c5-end;
}

• 可以看到使用 xx-start 和 xx-end 只要表示同一条线就可以, 当然数字标线也是可以使用的

repeat() 使用

• repeat 我想大家应该都不陌生了, 他也可以同时定义线的名称

grid-template-columns: repeat(5, [c-start] 1fr);
/* 等价于 */
grid-template-columns: [c-start] 1fr [c-start] 1fr [c-start] 1fr [c-start] 1fr;

• 是不是很好理解呢? 那这创建的都是相同的名称应该怎么用呢?

grid-column: c-start / c-start 3;
/* grid-column: c-start / span 2; */

• 开始的 1 省略了, 表示从第一个名称为 c-start 的开始到第 3 个 c-start 结束
• 同样的下面的写法也是可以使用的

grid-template-columns: repeat(3, [c-start] 1fr [c-end]);
/* grid-template-columns: [c-start] 1fr [c-end c-start] 1fr [c-end c-start] 1fr [c-end]; */

grid-template-columns: repeat(2, [c1-start] 1fr [c2-start] 2fr);
/* grid-template-columns: [c1-start] 1fr [c1-start] 1fr [c2-start] 2fr [c2-start] 2fr; */

小结

• grid-template-columns: [one] 1fr [two] 1fr [three]; 命名线 one two three
• grid-colum: one / three, 还是这种方式去使用, 只是把"数字"的线名改成了自定义线名
• 合理的 -start 和 -end 作为后缀, 可以形成网格区域
• 网格区域隐式定义了线名称, 可以直接使用
• repeat 函数高级用法, 定义定义重复网格的同时设置网格线名称

相关文档

参考文档

• developer.mozilla.org/zh-CN/docs/…