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

zhangbao90s
732 阅读6分钟

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

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

放置项目

理解网格线

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

image.png

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

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

image.png

放置项目

下面是我们要用到的 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;
}

结果如下：

image.png

View on Codepen

隐含行

现在再次修改 .item1 的 grid-row 和 grid-column 属性：


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

效果如下：

image.png

发现什么了？.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;
}

效果如下：

image.png

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;
}

效果如下：

image.png

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>

效果如下：

image.png

View on Codepen

更多学习资源

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

如果你准备更深入地探索和学习，这里有大量的资源供你学习。

Jen Simmons

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

Rachel Andrew

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

MDN

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

（完）

广告时间（长期有效）

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

瞄~

avatar
文章
阅读
粉丝