内容简介:相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里并不是说Grid Layout可以取代二者。另外Grid Layout与当前非常火热的Flexible Box Layout有一个本质上的区别就是维度不一样。在使用Flexible Box Layout时,我们只能通过flex-direction定义主轴沿着某一方向,而在Grid Layout中截然不同。下面一步步去了解Grid Layout的核心用法:
相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里并不是说Grid Layout可以取代二者。
另外Grid Layout与当前非常火热的Flexible Box Layout有一个本质上的区别就是维度不一样。在使用Flexible Box Layout时,我们只能通过flex-direction定义主轴沿着某一方向,而在Grid Layout中截然不同。
二、核心用法
下面一步步去了解Grid Layout的核心用法:
1、宏观角度
宏观上可以将Grid Layout看成由行和列组成,这一点可以类比HTML中的table标签,接下来用Grid语法声明一个3行3列的结构。
.grid { display: grid; width: 300px; height: 300px; margin: 0 auto; grid: repeat(3, 1fr) / repeat(3, 1fr); } .grid > div:nth-child(odd) { background-color: #f5f5f5; } .grid > div:nth-child(even) { background-color: #eee; } 复制代码
通过设置display属性为grid或者inline-grid,可以使得该元素变成Grid布局容器,这基本是新增布局声明的一个通用套路。
上述grid属性是一个复合属性,等价下面的代码。
.grid { /* grid: grid-template-rows / grid-template-columns */ grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } 复制代码
fr是Grid Layout中新增的单位,可以类比Flexible Box Layout中的flex-grow属性。
上述九宫格中的每一个小格子在Grid中有一个专门的术语 -- Grid Cell。
2、微观角度
从微观的角度去看Grid Layout,首先你需要了解另一个术语 -- Grid Line。
不知道读者们有没有看过制作豆腐的过程,其中有一个步骤是用线将整块的豆腐割开,那条线和上述的Grid Line是一样一样的。
那么我们前面所说的行与列就需要用一个更专业的术语来描述 -- Grid Track。
Grid Track实际上就是相邻的两条Grid Line所形成的区域。
在Grid Layout中是看不见Grid Line的,但是可以使用它,它默认是数字编号的形式,还记得上面的九宫格布局吗?通过设置display和grid属性,只是将容器划分了结构,但是并没有设置子元素的放置方式,幸好Grid Layout会为每一个子元素设置一个默认位置,例如第一行第一列的元素会这样设置。
/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */ grid-area: 1 / 1 / 2 / 2; 复制代码
上述的数字就是Grid Line的编号,并且它还支持自定义命名。
.grid { position: relative; margin: 100px auto; width: 500px; height: 500px; display: grid; grid: [line-row-1]1fr[line-row-2]1fr[line-row-3]1fr[line-row-4] / [line-col-1]1fr[line-col-2]1fr[line-col-3]1fr[line-col-4]; } .grid > div:nth-child(1) { grid-area: line-row-1 / line-col-1 / line-row-4 / line-col-3; } 复制代码
3、Grid Area
Grid Area也是一个比较重要的术语, 它主要由一个或者多个Grid Cell组成。前面的例子中,我们已经看到可以通过Grid Line为Grid Area分配空间,并且它还有另一种使用的方式。
.grid { position: relative; margin: 100px auto; width: 500px; height: 500px; display: grid; grid: "first first second" "first first fouth" "first first third"; } .grid > div:nth-child(1) { grid-area: first; } .grid > div:nth-child(2) { grid-area: second; } .grid > div:nth-child(3) { grid-area: third; } .grid > div:nth-child(4) { grid-area: fouth; } 复制代码
同样是上述的例子,我们可以这样放置子元素,是不是特别的友好。
4、绝对定位在Grid Layout中的表现
绝对定位大家应该很熟悉,其位置主要由包含块或者初始化包含块决定,通常我们都是通过设置父级元素的position属性来确定包含块,但是在Grid Layout中可以通过grid-area属性达到同样的效果。
.grid { position: relative; width: 400px; height: 400px; margin: 100px auto; display: grid; grid: repeat(2, 1fr) / repeat(2, 1fr); border: 1px dashed red; padding: 10px; } .demo1 { grid-area: 2 / 1 / 3 / 2; position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: red; } 复制代码
5、其它
理解上面介绍的几个术语和用法之后,基本上Grid Layout也没有那么神秘了。另外,例如Grid item之间的间隙以及它们的排列方式,基本上和Flexible Box Layout大同小异。
不过Grid Layout中还有很多好玩的知识点,例如margin凹陷的特性在Grid Layout中并不会发生。这些就留给读者自己去探索吧。
三、最后
为什么会起这个标题呢?主要是因为现在大部分的UI组件库基本上都提供grid组件,就拿比较流行的Bootstrap组件库来说,grid组件的实现:
- .row设置行,.col-*设置一个百分比宽度的列;
- .row通过负外边距抵消容器的padding;
- .col通过左右内边距实现元素之间的间隙效果;
- 通过媒体查询设置断点(breakpoints)实现响应式的布局;
而CSS3新增的这个Grid Layout相比较这些实现方式,可以说是非常优秀了。相信不久我们可以告别Grid-Framework,只有一个CSS3的Grid Layout。
以上所述就是小编给大家介绍的《愿只有一个Grid Layout》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 单例模式 - 只有一个实例
- 开发者,只有被裁,没有退休
- 为何说只有 1 种实现线程的方法?
- mysql REPLACE INTO只有一些字段
- 并不是只有 Redis 才可以做缓存
- 数据库表设计,没有最好只有最适合
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。