CSS Grid 布局快速教程

作者: 刘星
日期: 2018年8月21日

CSS Grid 布局是 CSS 中最强大的布局系统(没有之一)。说起布局,另一个方便好用的 Flex 布局是避不开的,与 Flex 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行。你可以把它想象成一个 Table。本文不是一个大而全的教程,而是一个快速入门。

使用 Grid 布局实现一个九宫格

与 Flex 布局类似,Grid 布局由 wrapper(父元素)和 items(子元素)两部分组成。在介绍它的详细语法之前先来个例子: 九宫格 https://codepen.io/ogilhinn/pen/mGdQZq

九宫格

代码如下:

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
.item {
  padding: 20px;
  background: #ddd;
  text-align: center;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;  
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

现在我们就得到了一个 3X3 的九宫格。

这儿用到了 grid-template-columns grid-template-rows 属性,这两个属性用于创建列(columns)和行(rows)。grid-templategrid-template-rowsgrid-template-columns 的缩写形式。上面的 CSS 可以缩写为:

.wrapper {
  display: grid;
  grid-template: 100px 100px 100px / 100px 100px 100px;
  // 指定一些具有相同宽度的网格项会变得很乏味。repeat函数可以帮助我们。
  // grid-template: repeat(3, 100px) / repeat(3, 100px);
}

grid-column-gap grid-row-gap指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

这些几个属性都用于网格容器即父元素。

##设置网格项(子元素)

与 Flex 一样,子元素也是可设置的,现在我们想把第一元素占据整行,修改 CSS,让第一个元素从第一个网格线开始到第四的网格线结束。

...
.item:first-child {
  background: #f00;
  grid-column-start: 1;
  grid-column-end: 4;
}

如果你不明白我们设置的只有 3 列,为什么有 4 条网格线呢?看下面

+-------+-------+-------+
+       +       +       +
+       +       +       + 
+-------+-------+-------+
1       2       3       4

当第一格占满后,剩下子元素将被挤到下一行(这儿为了好看,我们删除 3 个元素)。 grid-column-startgrid-column-end 可以缩写为 grid-column`

...
.item:first-child {
  background: #f00;
  grid-column: 1 / 4;
}

grid-rowgrid-column 差不多,只是行与列的差别。为了加深印象,我们来让第二个元素占满第一列,如图

...
.item:nth-child(2) {
  background: #0f0;
  grid-row-start: 2;
  grid-row-end: 4;
}

同样,可以缩写为

grid-row: 2 / 4

我还希望把 3 号元素占满剩下的灰色区域,通过上面学习几个属性我们可以很快实现这个小需求。(还是为了好看,我们再删除 3 个元素)

修改 CSS,让 3 元素的行和列都设置为从第二个网格线到第四个网格线即可

...
.item:nth-child(3) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
}

如果你觉得这样写有点麻烦,我们还有另一种缩写 grid-area grid-area属性接受 4 个由'/‘分开的值:grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。上例可修改为:

...
.item:nth-child(3) {
  grid-area: 2 / 2 / 4 / 4;
}

上面的这个结构,在实际中很常见 Header, Sidebar, Main。我们可以使用 grid-template-areas 属性 通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号(.)代表一个空的网格单元。这个语法本身可视作网格的可视化结构。代码如下

<div class="wrapper">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.item {
  background: #ddd;
  text-align: center;
  padding: 20px;
}

.wrapper {
  width: 300px;
  height: 300px;
  display: grid;
  grid-gap: 2px;
  // 很直观的网格区域划分
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "sidebar main main";
}

.item:first-child {
  grid-area: header;
  background: #f00;
}
.item:nth-child(2) { 
  grid-area: sidebar; 
  background: #0f0;
}
.item:nth-child(3) { 
  grid-area: main; 
}

网格模板区域(grid-template-areas)属性提供了一个可视化的网格结构,使网格容器的整体布局更容易被理解。

除了上文介绍的网格布局外 还有一些justify-items align-items justify-content 之类的属性设置对齐方式,这儿就不一一举例了。

文档信息

版权声明:署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

原文链接:https://www.liuxing.io/blog/css-grid-tutorial/

发表日期:2018年08月21日


相关文章

各种 CSS 实现 Sticky Footer

什么是 “Sticky Footer” 所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

2017年11月20日

sass 入门与实战

Sass 入门与实战 **Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

2017年5月16日

最近更新