基础篇39. 挑战views的极限（3）-- CSS网格布局入门

本书中涉及到的Views内容属于实战性质，因此所有内容、知识点和操作手法都指向最后的结果，即第39节的结果。如果您需要一个全面的views教程，请点击传送门，云客在他的源码分析中，对views模块进行了全面的分析和讲解：<140. 视图view的使用（上）>

这是我们在上一节中做的views区块，我们为这个区块引入了一个新的CSS文件，将它做成了现在的样子。这个文件中的css代码超过300行，但是，主体的内容都在重复一个新的CSS技术概念：CSS Grid——也就是CSS网格。这个知识点如果要仔细讲的话，本身就可以开一个专栏，为了节省时间，我们将在这一节的视频中挑选CSS网格中的重点，做一个快速的入门介绍。关于它的更多细节你可以查阅文档。

首先，说一下兼容性。主流浏览器都兼容CSS网格，这包括Chrome、Safari、Firefox、Opera和Edge都支持CSS网格。你可以在文档中找到这张表格的地址。是的，上述浏览器中没有IE，因为微软在两年前发布了Edge用来替代IE。其中Edge 16是在2017年10月16日发布的，因此，如果你的Edge还不能正常显示上一节所展示的效果的话，你还需要升级你的windows来，将Edge升级到最新版才行。

其次，现在对于CSS网格开发支持最好的是Firefox，它有专门为CSS网格开发对应的debug功能。这个在之后的内容中会讲到。我知道很多前端开发者都喜欢用Chrome，而且以后Chrome也一定会在Css网格debug上有所跟进，但是，至少现在，请你使用Firefox 56以上的版本来实践本节中的例子。

第三，这一节的内容我们会用到Codepen，这是一个非常流行的在线前端展示平台。让我们先来创建一个pen，然后隐藏js输入框，因为我们不需要用到它。

先让我们来添加几行简单的html：

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2
    <p class="sub-item"></p>
  </div>
  <div class="item item-3">3</div>
</div>

然后为item添加一点样式，让我们能看得更清楚：

.item {
  background: #D8D8D8;
  border:thin #adadad solid;
}

接着，为了使用CSS Grid，你需要把某个元素（比如这里的container）的Display属性设置为grid，以告诉浏览器，这个元素及其内部的所有直接的子元素（但是不涉及到子元素中的子元素）都以网格的模式来布局：

display:grid;

其中，这个元素被称为网格容器，它内部的所有子元素（不包括子元素中的子元素）被称为网格项。

上面的代码中，container是网格容器，item-1、item-2、item-3是网格项。sub-item就不是网格项。

grid-template-columns: 100px 100px 100px 100px 100px 100px;  /* 6栏 */
  grid-template-rows: 100px 100px 100px; /* 3行  */

接着为网格定义模板，这里定义的是一个6栏3行的网格，每一个各自的宽和高都是100像素，然后为了好看，我们给网格设置一个宽度，并且让它居中。

我们来查看元素，你可以看到在container的display属性的旁边有一个网格符号，点击它，就能在页面上显示出这个网格的边界线，你可以看到这是一个6栏3行的网格。同时，你也应该可以看出，网格实际上是一个虚拟的东西，如果不开启网格辅助线的话，你很难知道网格是什么样子的。

然后我们把让网格居中的样式删除，重新定义一次网格。这里我们引入了一个新的单位，fr——它的含义类似于分数，如果一栏占1fr也就是1份的话，3栏就是3份平均分，6栏就是六份平均分。它能占有它所能占有的最大的空间。因此，现在这个网格占据了整个浏览器的横向空间并且被平均分成了6份。但是，我们并不一定让每一栏都只占有1份，如果第一栏占有两份的话，那就等于是一共把浏览器的宽度分成7份，第一栏占有2份，其他每一栏一份。

我们并没有为3个网格项设置宽度和高度，但是，根据他们的灰色背景颜色，你可以看到，他们都占据了整个网格。我们可以使用justify-items和align-items来调整网格项在网格中的对齐方式，比如：

 justify-items:center;
 align-items: center;

可以让每一个网格项在网格里居中。

与此同时，我们还可以调整某一个网格项，让他有额外的对齐方式：

.item-3{
 justify-self:end;
 align-self:end;
}

以上4个属性都有4个不同的值可供选择，分别是start、center、end和stretch。你可以自己试一试不同的结果。在没有设置的时候，他们的默认值是stretch，也就是拉伸。justify-self和align-self会覆盖掉justify-items和align-items的值。你会发现灵活使用这几个属性，可以很轻松的实现垂直居中和水平居中。

接下来的一个重要概念是网格线，它就是组成网格的线，从上到下，从左到右，都是从1开始进行编号，然后依次递增。

组成网格的线，从上到下，从左到右，都是从1开始进行编号，然后依次递增。

利用网格线，我们可以为网格项进行定位排版，比如我们可以把网格项的第一项定位到第5和第6根黄线的中间，第3和第四根绿线中间。我们只要这么写即可：

.item-1{
  grid-column: 5 / 6;
  grid-row: 3 / 4;
}

这里的3和5分别代表网格线的开始，4和6代表结束。

让我们把第一项设置为拉伸，这样，可以更好的看到它在网格中的位置。

justify-self:stretch;
  align-self:stretch;
  background:red;

接着我们可以继续修改网格线开始和结束的值，我们可以让第一项跨越多个网格，比如：

grid-column: 4 / 6;
  grid-row: 2/ 4;

这样，第一项现在就跨越了4个格子。此时如果我们删除拉伸的属性，那么第一项就会按照前面设置的那样以居中的方式在这4个格子中定位。

然后，你还需要知道的是，网格中还可以嵌套其他的网格，你只要把某个网格项的display属性设置为grid，就可以在这个网格项里面定义一个新的网格。

以下是本节内容中CSS代码的最后版本：

.item {
  background: #D8D8D8;
  border:thin #adadad solid;
}

.container{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;  /* 6栏 */
  grid-template-rows: 100px 100px 100px; /* 3行  */
  justify-items:center;
  align-items: center;
}

.item-3{
 justify-self:end;
 align-self:end;
}

.item-1{
  grid-column: 4 / 6;
  grid-row: 2/ 4;
  justify-self:stretch;
  align-self:stretch;
  background:red;
}

参照以上代码和说明，你在回过头来看上一节中的CSS代码就应该不会有什么大问题了。并且，你会发现上一节中为views列表的每一项添加计数器class的原因。

本书共102小节。


评论 (1)