grid网格布局,如何定义网格线名称?如何使用网格线名称?
发布于 作者:苏南大叔 来源:程序如此灵动~

继续说grid
网格布局,本文的主要视角和以前的文章有所不同。本文说的是网格布局中最容易被忽略的网格线,注意这个网格线和gap
的概念还是有所不同的,苏南大叔理解着就类似于坐标线,它只是一条线,理论上并没有宽度的说法。而gap
则是有宽度的说法,并且最边侧的位置并没有空隙存在,但是最边侧的位置是存在网格线的。

大家好,这里是苏南大叔的“程序如此灵动”博客,这里记录苏南大叔的代码所学所想。本文测试环境:win10
,chrome
。
基本知识
本文内容的顺利解读,您可能需要先看下面两篇文章:
首先grid-template
有两种用法,一种是直接代表grid-template-areas
的简写。另外一种是代表grid-template-rows
和grid-template-columns
的组合定义。
在前面的文章里面,属性组合是:
- 定义
grid-template-rows
和grid-template-columns
,或者使用它们的组合grid-template
。 grid-template-areas
+grid-area
,用grid-template-rows
和grid-template-columns
来补充尺寸信息。
测试用例
本文中,使用的组合是:grid-template-columns
+grid-template-rows
定义尺寸及网格线名称,以及grid-area
的第二种用法。

定义网格线
在本文中,在grid-template-columns
+grid-template-rows
中,
- 使用中括号定义了网格线的名字。
- 一条网格线可以有多个名字
- 也不是所有的网格线都需要被定义出个名字。
- 两条不同的网格线,可以有相同的名字。就像都是一号线或者二号线一样。
-s
这里代表-start
,-e
这里代表-end
。就是和grid-row
和grid-column
中的-start
和-end
关键词进行区分。参考文章:https://newsn.net/say/grid-zindex.html
使用网格线
网格线被定义之后,是在grid-area
里面使用的,理解为原来的数字坐标的一种平行替换即可。
理解为:
特殊的grid-area
默认规则
本文中,本来是四个元素平分版面的效果,但是实际上并不是这样的效果。如下图所示:

之所以出现这些偏差,就与grid-area
的默认值有关,grid-row-start / grid-column-start / grid-row-end / grid-column-end
。

演变如下:grid-row-start / grid-column-start / grid-row-end / [默认grid-column-start效果为span1]
。grid-row-start / grid-column-start / [默认grid-row-start效果为span1] / [默认grid-column-start效果为span1]
。grid-row-start / [默认grid-row-start] / [默认grid-row-start效果为span1] / [默认grid-column-start效果为span1]
。
相关链接
- https://newsn.net/say/css-grid.html
- https://newsn.net/say/grid-auto-flow.html
- https://newsn.net/say/grid-auto-flow-dense.html
- https://newsn.net/say/grid-template.html
- https://newsn.net/say/grid-template-areas.html
- https://newsn.net/say/grid-minmax.html
- https://newsn.net/say/grid-row.html
- https://newsn.net/say/grid-zindex.html
总结
本文中定义了网格线的名字,并且在grid-area
里面使用定义row
和column
的开始和结束位置的网格线名称。本文比较难以理解,仔细想一想吧。更多文章请点击:


