Flexbox很棒，但它的主要目的是帮助我们在一个维度上定位元素，无论是水平还是垂直。对于整个页面的二维布局，我们主要依靠像Bootstrap或Foundation这样的框架来为我们提供类，我们可以使用这些类来创建网格布局。一个新的模块Css Grid Layout，很快就会在浏览器中推出)应该会改变这一切。

让我们通过一个非常简短的概述来探索一下css网格。首先，要牢记几个要点：

与Flexbox一样，CSS Grid的源代码顺序无关紧要，项目可以根据视口的大小轻松重新定位。
您可以现在开始使用网格布局，并通过@supports使用功能检测，以便仅在支持的浏览器中应用。
一些即使使用现代CSS框架的网格系统也无法实现的布局将通过CSS Grid实现。

词汇

在CSS网格中引入了一些概念，最好熟悉这些词汇表：

网格线 ：项目通过项目开始和结束的线条定位在网格上，因此网格线是CSS网格工作方式的核心。柱网轴线从左到右从1开始编号，行轴网线从上到下从1开始编号。

网格行行2

网格线

网格轨迹 ：两条网格线之间的空间。

网格轨道

网格track

网格区 ：由任意4条网格线定义的区域。

网格区

网格area

网格单元 ：两条连续的列行网格线之间的间距。栅格上可能的最小单位。

网格单元格

网格cell

显示：父节点上的网格

有点像FlexBox，网格是由容器元素和子元素组成的，这些元素成为网格项目。您只需在容器元素上设置Display：Grid即可。网格行和网格列由网格模板列和网格模板行定义。

让我们从以下标记开始：

1<div class="container">
2  <div class="box box-1">Box 1</div>
3  <div class="box box-2">Box 2</div>
4  <div class="box box-3">Box 3</div>
5  <div class="box box-4">Box 4</div>
6  <div class="box box-5">Box 5</div>
7  <div class="box box-6">Box 6</div>
8  <div class="box box-7">Box 7</div>
9</div>

下面是我们如何定义容器的css：

1.container {
2  display: grid;
3
4  grid-template-columns: 150px 150px 80px;
5  grid-template-rows: 100px auto;
6
7  grid-gap: 10px 15px;
8}

这样，我们就已经得到了一些有趣的东西，甚至不需要设置网格项目的任何属性：

css网格示例1

注意我们是如何使用grid-gap在单元格之间添加10 px水平间距和15 px垂直间距的。

现在，我们可以通过定义特定项目的起始行和结束行来更进一步。未明确放置在网格上的项目将根据算法放置。我们使用GRID-COLUMN-START、GRID-COLUMN-END、GRID-ROW-START和GRID-ROW-END来定义项目在网格上的开始和结束位置：

 1.box-1 {
 2  grid-column-start: 1;
 3  grid-column-end: 3;
 4}
 5
 6.box-3 {
 7  grid-column-start: 1;
 8  grid-column-end: 3;
 9  grid-row-start: 2;
10  grid-row-end: 4;
11}

或者我们可以使用网格列和网格行的简写来得到相同的结果：

1.box-1 {
2  grid-column: 1 / 3;
3}
4
5.box-3 {
6  grid-column: 1 / 3;
7  grid-row: 2 / 4;
8}

下面是现在生成的栅格：

CSS网格示例2

👉间隙不会添加新的网格线，因此相邻的项目实际上接触的是同一条线，即使间隙将它们分开。

当今的css网格布局

不幸的是，网格布局仍然不能广泛使用。以下是目前的供应情况：

Firefox自版本52起默认支持。
在最新的Chrome和Opera中完全支持。
在IE和Edge中支持，但语法较旧。
在最新的Safari技术预览中可用。

Chrome应该是2017年3月默认开启网格的shipping版本。所以它很快就会到来，2017年很有可能成为css网格之年！

在Chrome中开启

要在Chrome中启用CSS网格，请转到Chrome：//FLAGS/，找到实验性Web平台功能 并将其启用。

火狐开启

Firefox 52及以上版本现在支持网格布局。

了解更多

我们把这篇文章写得很简短，但是有很多新概念需要学习，所以我们把它们中的许多分成了各自的帖子：

进一步阅读

下面是一些很好的资源，可以帮助您了解CSS网格的细节：

css-技巧Grid完整指南
雷切尔·安德鲁的示例网格
这是埃里克·A·迈耶的eBook
Jen Simmons编写的布局演示

CSS 网格布局：简介

词汇