CSS Grid布局(3)

2024-04-02 16:44:37

10.网格线命名

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

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

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

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

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

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

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

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

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

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

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

CSS Grid布局(3)相关推荐

带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...
css grid布局_如何使用CSS Grid重新创建Medium的文章布局
css grid布局 When people think of CSS Grid they normally envision image grid layouts and full web page ...
css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
CSS Grid 布局
什么是 Grid 布局? CSS Grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式 Grid 由水平线和垂直线构成,两条水平线中间的区域叫做行轨道,两条垂直线中间的区域叫做列轨 ...
CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
html布局间距,CSS Grid布局：列和间距
在上一节介绍了Grid的基础知识,在前一节的基础上介绍Grid的新特性,怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局. 可伸缩性单位网格的目的是使我们能正确的控制网格布局 ...
html grid布局,css grid布局使用
Note:设置网格布局后,容器子元素(项目)的float.display:inline-block. display:table-cell. vertical-align 和Column-*等设置都将 ...
css grid布局fr单位理解
转自 fr 简介及实例网格布局支持弹性尺寸(flex-size),这是一个很好的自适应布局技术. fr是一个相对尺寸单位,表示剩余空间做等分,此项分配到的百分比(如果只有一个项使用此单位,那就占剩余 ...

最新文章

热门文章