CSS Grid布局:快速入门

发布于 大漠

我们将了解前沿的CSS Grid布局,从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章,将会跳过一些细节和其中的细微差别,其主要是帮助你了解前沿的CSS Grid布局。

设置你的浏览器

CSS Grid布局(也常常被称为网格)是一个正在讨论的CSS模块规范,你会发现现在浏览器对其支持很弱。如果你现在开始使用它,你需要在IE11(它支持的是旧规范)、Microsoft Edge、Chrome Cannary或者Firefox Nightly才能看到效果。

也许最简单的方法是在Chrome浏览器中通过chrome://flags/#enable-experimental-web-platformfeatures打开Chrome浏览器实验网络平台功能。

设置你的浏览器

建立一个网格

网格允许我们根据区域来排列页面上的元素。

专业术语

在了解网格之前,需要对一些专业术语有所了解。在整个网格中常用到的术语有:网格线(Grid lines)、水平或纵向网格轨道(Grid tracks)。网格轨道其实就相当于行(rows)和列(columns),而且两者之间有一个间距(Gutters)。在网格轨道相交的区域,就是单元格(Grid cells),相当于table中的单元格。这些重要的术语能帮助我们更好的理解Grid。

下图演示了一个Grid,其对应的专业术语:

  • 1表示Grid lines
  • 2表示Columns
  • 3表示rows
  • 4表示cells

Grid

上图是一个基本的Grid,高亮部分分别代表了Grid lines、columns、rows和cells。

间距(gutters)

对于一个平面布局,它看起来和我们熟悉的网格没有两样,两个网格轨道之间的区域称为间距(gutters)

间距

网格区域(Grid area)

还有最后一个术语要介绍:

网格区域

网格区域是由任何四个网格线组成的区域,它可以包含任意数量的网格单元格。

接下来花点时间让我们创建一个网格,并且在浏览器能看到其效果。

网格模板

创建上面的网格,需要创建一个容器,你可以根据你自己的喜欢来设置:

<section class="grid-1">
 
</section>

在这个容器里,我们将放九个子元素进去:

<section class="grid-1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
  <div class="item-9">9</div>
</section>

如果你想跟着下面的内容一起动手创建一个网格,你需要先从CodePen中Fork一份出来。在这个示例的初始化中,我给每个网格项目添加了不同的样式风格。

网格规则

首先需要通过给容器设置display的值为grid,声明容器是一个网格容器:

.grid-1 {
  display: grid;
}

对,这很容易就做到了。接下来需要定义网格样式风格。也就是设置网格行和列,我们可以通过grid-template-columnsgrid-template-rows属性来设置:

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}

你可以看到,每个属性都有五个值。gird-template-columns的每个值分别表示:第一列的宽度是150px,第二个是20px,第三个是150px,以此类推,设置了五列的宽度,最终效果看起来就像芬兰的国旗。grid-template-rows的五个值也是类似的。其中每个都有一个默认值auto,告诉浏览器,其高度是内容的高度,但是我们希望每两行之间需要一个间距,而且这个间距的高度应该是20px。因此我们需要列出所有五行的高度。

现在我们看到的效果是:

每个项目已经按顺序自动构建了一个网格区域。这是没有问题,但网格项目247发生了什么?它们变成了列间距。如果在网格布局中没有显式的设置,那么网格轨道之间就会构成一个间列。为了让其更像网格的间距,我们需要添加一些其它网格样式规则。

网格项目规则

从语法上讲这一点很复杂,但我们要让事情尽可能变得更容易。我们开始给第一个网格项目设置grid-column:1grid-row:1

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

网格项目会自己填充网格线之间的最小可用空间。第二个项目有点不太明显,但我们希望这个也从grid-row:1开始,同时希望跳过grid-column:2,而是从grid-column:3开始。那么第二列就变成了列与列之间的间距。

.item-2 {
  grid-column: 3;
  grid-row: 1;
}

我们将继续这样做,跳过列间距和行间距,最终完成了第九个网格项的设置:

.item-9 {
  grid-column: 5;
  grid-row: 5;
}

最终的代码如下所示:

.grid-1 {
  display: grid;
  grid-template-columns: 150px 20px 150px 20px 150px;
  grid-template-rows: auto 20px auto 20px auto;
}
.item-1{
  background: #b03532;
  grid-column: 1;
  grid-row: 1;
}
.item-2 {
  background: #33a8a5;
  grid-column: 3;
  grid-row: 1;
}
.item-3 {
  background: #30997a;
  grid-column: 5;
  grid-row: 1;
}
.item-4 {
  background: #6a478f;
  grid-column: 1;
  grid-row: 3;
}
.item-5 {
  background: #da6f2b;
  grid-column: 3;
  grid-row: 3;
}
.item-6 {
  background: #3d8bb1;
  grid-column: 5;
  grid-row: 3;
}
.item-7 {
  background: #e03f3f;
  grid-column: 1;
  grid-row: 5;
}
.item-8 {
  background: #59a627;
  grid-column: 3;
  grid-row: 5;
}
.item-9 {
  background: #4464a1;
  grid-column: 5;
  grid-row: 5;
}

最终看到的效果如下:

总结

就是这么的简单,你可以看到一个基本的网格布局。接下来我们总结一下这四个基本步骤:

  • 创建一个容器,通过display:grid;声明这个容器是一个网格容器
  • 同样在容器中设置grid-template-columnsgrid-template-rows声明网格轨道(声明行和列)
  • 在网格容器中添加子元素,创建网格项目(单元格)
  • 使用grid-columngrid-row来指定网格项目(单元格)的列和行

本系列教程的下一篇中,我们将深入的分析网格的语法,提高列间距的定义,并且通过fr单位和repeat()函数来创建可伸缩的网格布局,让网格进一步变得更简单。

本文根据@Ian Yates的《CSS Grid Layout: A Quick Start Guide》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://webdesign.tutsplus.com/tutorials/css-grid-layout-quick-start-guide--cms-27238

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.fedev.cn/css3/css-grid-layout-quick-start-guide.htmlAir Jordan VII 7 Retro Championship