CSS Grid布局(3)

来源:互联网 发布:淘宝嘉年华妈妈装 编辑:程序博客网 时间:2024/06/13 17:11

10.网格线命名

通过grid-template-rows和grid-template-columns定义网格时,网格线可以被命名。网格线名称也可以设置网格项目位置

这里写图片描述

grid-template-rows和grid-template-columns定义你的网格,将名称分配给网格线

定义网格线名称时需要避免使用规范中出现的关键词,以免导致混乱

分配网格线名称必须用方括号[网格线名称],然后后面紧跟网格轨道的尺寸值

这里写图片描述

这里写图片描述

可以在方括号中添加多个名称来命名网格线名称,使用多外名称命名网格线名称时,名称间要用空格隔开

每一个网格线的名称可以用来定位网格项目的位置

这里写图片描述

11.通过网格线名称设置网格项目位置

使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似

这里写图片描述

引用网格线名称的时候不应该带方括号

这里写图片描述

这里写图片描述

grid-row和grid-column简写属性也适用于网格线名称,也可以用来设置网格项目的位置

这里写图片描述

12.使用相同的名称命名网格线和设置网格项目位置

原创粉丝点击