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日

最近更新

Curl 使用指南

Curl 是一个常用的命令行数据传输工具, 可以方便的从命令行创建网络请求

2021年5月04日

JavaScript 中的分号

JavaScript 代码到底加不加分号。本文带你了解 JavaScript 的分号自动插入机制,以及哪些情况必须加分号

2021年5月02日