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

这是我们在上一节中做的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的原因。

本书共83小节:

评论 (1)