阅读 256

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

原文链接: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

隐含行

现在再次修改 .item1grid-rowgrid-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-rowgrid-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 网格布局的每个特性提供了全面的教程和文档。

(完)


广告时间(长期有效)

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

瞄~

关注下面的标签,发现更多相似文章
评论