网格布局比弹性布局涉及的属性多了好多。然而其实更简单了。

弹性布局是一维布局,侧轴方向的延伸属于被动技能。网格布局就厉害了,是二维布局,两个轴同等重要。说白了吧,就是在容器里面划上格子,然后把子元素往里面摆。这个子元素在哪个格子里,哪个在哪个里……

然后子元素可以占据不止一个格子,比较大,那多占几个,没问题!

一个格子也可以同时被几个子元素占据,就是叠在了一起。我们可以用 z-index 来控制它们之间的堆叠顺序。

这就好像父元素是一张网格纸,我往里面粘贴子元素的感觉。那么用起来也类似于用坐标定位,当然这是原理上,书写的格式并不类似。

这么说就非常的简单,因为归根结底一句话——你让子元素在哪里就在哪里。这绝对是初学者最喜欢的一句。

道理是明白了,下面是怎么用。那第一点就是网格的划分,但是这个涉及到两层规则,显式网格和隐式网格。我跟你们说,就这翻译,看起来好像能明白啥意思,其实一点也搞不懂。不如我给你画个图,一下子就明白了:

网格纸

这是一张网格纸,就是上面本身印刷着不明显的网格,稍微对笔记本了解多一点的朋友应该都知道这种东西。我又在上面画了一个表格,很普通的一件事情。

我们现在往里面填内容,那么内容如果要放在我画的表格所在的区域,肯定以表格划分的区域为参考,要不然我还画格子干嘛用啊;如果到了下半部分,我没画格子,那为了整齐,肯定就以纸上自带的网格为参考了。这就是一个很简单的优先级问题,如果我画了格子,以我的格子为准;如果我没画格子,以纸上隐约可见的格子为准。

那么我画的格子,对应的就是显式网格;而纸上自带的格子,对应的是隐式网格。首先我们必须有网格,但是并不要求两者都具备。我没画格子,那就完全以纸上的网格为参考。或者我把纸上完全画好了格子,那纸上本身有没有格子也都没所谓了。

不过么,无论显式网格,还是隐式网格,都需要我们自己去定义的,根据自己的需求去定义就好了。一般来说我们优先使用显式网格,只有当显示网格没有覆盖整个容器,且可能会用到其余的区域时,才需要定义隐式网格。

如果你听明白了我说的这些,其实你就已经学会了大部分。然后我们就是去规定这些网格,然后把子元素放进去,虽然属性很多,但是,终究还是这点事情而已。

来规定几个名词吧,这样后面讨论着方便,我也不画示意图了,大家就看着上面的表格跟着想就行了,因为这几个概念非常简单,只是先确定一下,方便讨论。

  • 网格中的每一条线,是网格线;
  • 网格中的每一个单元格,是网格单元格;
  • 几个单元格组成的矩形,是网格区域;
  • 两个相邻网格线之间的空间(其实就是某一行或者某一列,但是不能这么说,你可以体味一下里面的区别),是网格轨道;
  • 我们要放在里面的子元素,叫做网格项。

这么简单的约定,一下子就能记住吧?如果记不住,就多看两遍喽~好歹是没有理解难度的。

【本章助记卡片:卡片 for 第八十一章