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

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

命名网格线

  • 还记得 grid-template-rowsgrid-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; 使用 one1 是等价的

隐式网格区域

  • 在选择名字时,如果把一个区域周围的线都用 -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-startxx-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 的开始到第 3c-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 函数高级用法, 定义定义重复网格的同时设置网格线名称

相关文档

参考文档

相关推荐
DN金猿13 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子14 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6627 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_39 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端2 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app