- 在前面的文章中我们使用网格线和网格区域各自实现了效果
- 本文我们将会把这两种方式做一个结合, 使用更高级的用法
命名网格线
- 还记得
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 threegrid-colum: one / three, 还是这种方式去使用, 只是把"数字"的线名改成了自定义线名- 合理的
-start 和 -end 作为后缀, 可以形成网格区域
- 网格区域隐式定义了线名称, 可以直接使用
repeat 函数高级用法, 定义定义重复网格的同时设置网格线名称
相关文档
参考文档