[译] CSS 网格布局入门：Part 2

原文连接：INTRODUCTION TO CSS GRID LAYOUT，from FIREFOX DEVTOOLS PLAYGROUND

这里接着 《CSS 网格布局入门：Part 1》 继续讲。

放置项目

理解网格线

如今咱们已经知道如何定义网格容器以及网格的行和列了。下面要学习如何在网格中放置项目了。放置项目有好几种方式，咱们从最基本的开始学习。下面是一个  3x2 的网格：

网格里的每一个项目都会自动按默认顺序放置。

若是咱们但愿对项目取得进一步的控制，就须要使用网格线号（grid line numbers）来放置它了。网格线是按照从左到右，从上到下编号的（若是使用的从右到左排版的语言，那么网格线是按照从右到左编号的）。上面例子里的网格线的编号方式以下：

放置项目

下面是咱们要用到的 HTML 结构：

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>
复制代码

假设咱们想将第一个网格项目 .item1 放置到第二行并占据第二列。那么，这个项目要从第二根行线开始，延伸到第三根行线。一样，它还要从第二根列线开始，延伸到第三跟列线。因而，咱们就获得了下面的 CSS：

.item1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}
复制代码

简写属性

上面 .item1 的放置方位，还能够用简写属性重写：

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
复制代码

结果以下：

View on Codepen

隐含行

如今再次修改 .item1 的 grid-row 和 grid-column 属性：

.item1 {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}
复制代码

效果以下：

发现什么了？.item1 跨越多个列，从第 1 根网格线到第 3 根；它还被放置在网格行线 3 和 4 之间，将会建立一个新行。这个新行是一个隐含行（implicit row），它的高度由网格容器的 grid-auto-rows 属性控制。你能够在 MDN 了解更多关于自动放置（auto-placement）的默认规则。

如今，让咱们将这些新知识应用到工做中——建立一个基本布局（basic layout）。

基本布局

既然咱们已经学习了如何建立网格和在网格上放置项目，如今就来建立一个基本布局。咱们不会在这里引入任何新的概念。只是简单使用 grid-row 和 grid-column 简写属性来手动放置诸如页眉、页脚等页面元素。

下面是本节中使用到的 HTML：

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>
复制代码

还有 CSS：

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}
复制代码

效果以下：

View on Codepen

grid-template-areas

在前面的示例中，咱们学习了如何使用网格线放置项目来建立基本布局。放置项目还有另外一种方法，是使用命名网格区域，这须要借助 grid-template-areas 和 grid-area 这两个属性。咱们仍是用前面的例子，不过此次使用 grid-template-areas 属性从新改写：

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}
复制代码

这里咱们定义了三列四行。使用 grid-template-areas 属性来定义整个布局，而不是一个一个项目的指定放置位置。而后，咱们再使用 grid-area 属性将这些区域分配给每一个网格项目。

HTML 结构：

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>
复制代码

剩下的 CSS：

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}
复制代码

效果以下：

View on Codepen

命名网格线

在前面的示例中，咱们了解了如何经过 grid-column 和 grid-row 属性为项目指定占据的网格线，从而在网格中实现项目的放置。其实，在定义网格时，咱们还能够为这些网格线命名，名称放置在方括号 [] 里。这样，咱们也能使用命名网格线来放置项目了：

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-gap: 1rem;
  grid-template-columns:
    [main-start sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [column3-start] 1fr
    [content-end main-end];
  grid-template-rows:
    [row1-start] 80px
    [row2-start] 1fr
    [row3-start] 1fr
    [row4-start] 100px
    [row4-end];
}
复制代码

如今有了命名网格线，咱们就能够使用这些名称放置项目了。接下来，咱们重写以前基本布局的样式，使用命名网格线（named lines），而不是网格线号（line numbers）:

.header {
  grid-column: main-start / main-end;
  grid-row: row1-start / row2-start;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: row2-start / row4-start;
}

.content-1 {
  grid-column: content-start / content-end;
  grid-row: row2-start / row3-start;
}

.content-2 {
  grid-column: content-start / column3-start;
  grid-row: row3-start / row4-start;
}

.content-3 {
  grid-column: column3-start / content-end;
  grid-row: row3-start / row4-start;
}

.footer {
  grid-column: main-start / main-end;
  grid-row: row4-start / row4-end;
}
复制代码

这里是使用的 HTML 结构：

<div class="container">
  <div class="item header">header</div>
  <div class="item sidebar">sidebar</div>
  <div class="item content-1">Content-1</div>
  <div class="item content-2">Content-2</div>
  <div class="item content-3">Content-3</div>
  <div class="item footer">footer</div>
</div>
复制代码

效果以下：

View on Codepen

更多学习资源

但愿这个简短的系列教程为你提供了开始尝试和构建 CSS 网格布局所需的知识。CSS 网格布局功能很强大，咱们只讲了点基础的知识。

若是你准备更深刻地探索和学习，这里有大量的资源供你学习。

Jen Simmons

Jen Simmons 是 Mozilla 的设计师倡导者。她也是一名开发人员、做家和演说家，也是 CSS 工做组成员。

• jensimmons.com
• twitter

Rachel Andrew

Rachel Andrew 是一名开发人员、演说家和做家。她是 CSS 工做组的一名成员，写了不少关于如何学习 CSS 网格布局的教程。

• gridbyexample.com
• twitter

MDN

MDN 为 CSS 网格布局的每一个特性提供了全面的教程和文档。

• MDN

（完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

瞄~