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

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

命名网格线

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

css 复制代码

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];

css 复制代码

.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 作为后缀, 网格就会为区域创建一个名字

css 复制代码

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

css 复制代码

.child {
    grid-area: child;
}

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

css 复制代码

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

css 复制代码

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

还记得上一节我们讲到的这种方式吗? 去查看
其实我们是可以通过区域的名称获取到线的, 下图简单的标注了 3 条线, 没标注的也是类似的
讲了这么多, 那我们怎么使用呢? 我们新增一个元素 .cover 来看一下效果

css 复制代码

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

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

repeat() 使用

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

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

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]; */

css 复制代码

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/...

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

命名网格线

隐式网格区域

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

repeat() 使用

小结

相关文档

参考文档