CSS网格布局：简介
Flexbox 很棒，但它的主要目的是帮助我们在一维中定位元素，无论是水平的还是垂直的。 对于整个页面的二维布局，我们主要依赖于 Bootstrap 或 Foundation 等框架来为我们提供可用于创建网格布局的类。 一个新模块，CSS Grid Layout，将很快在浏览器中可用，应该会改变这一切。
让我们通过一个非常简短的概述来探索 CSS Grid。 首先，要记住几个关键点：
- 与 Flexbox 一样，源顺序与 CSS Grid 无关，并且项目可以根据视口的大小轻松重新定位。
- 您现在可以开始使用网格布局，并通过 @supports 使用特征检测，这样它只适用于支持的浏览器。
- 一些即使使用现代 CSS 框架的网格系统也无法完成的布局，现在可以使用 CSS Grid。
词汇
CSS Grid 引入了一些概念，熟悉这些词汇是个好主意：
- 网格线：项目在网格上以项目开始和结束的线定位，因此网格线是 CSS Grid 工作方式的核心。 列网格线从左到右从 1 开始编号，行网格线从上到下从 1 开始编号。
网格行第 2 行
- 网格轨迹：两条网格线之间的空间。
网格轨道
- 网格区域：由任意 4 条网格线定义的区域。
网格区域
- 网格单元：两个连续的列和行网格线之间的空间。 网格上可能的最小单位。
网格单元
显示：父级上的网格
有点像 flexbox，网格是由一个容器元素和成为网格项的子元素组织的。 您只需在容器元素上设置 display: grid。 网格行和列由 grid-template-columns 和 grid-template-rows 定义。
让我们从以下标记开始：
<div class="container"> <div class="box box-1">Box 1</div> <div class="box box-2">Box 2</div> <div class="box box-3">Box 3</div> <div class="box box-4">Box 4</div> <div class="box box-5">Box 5</div> <div class="box box-6">Box 6</div> <div class="box box-7">Box 7</div> </div>
下面是我们如何定义容器的 CSS：
.container {
display: grid;
grid-template-columns: 150px 150px 80px;
grid-template-rows: 100px auto;
grid-gap: 10px 15px;
}
有了这个，我们已经得到了一些有趣的东西，即使没有在网格项目上设置任何属性：
请注意我们如何使用 grid-gap 在单元格之间添加 10px 水平间隙和 15px 垂直间隙。
现在我们可以通过定义特定项目的开始行和结束行来更进一步。 未明确放置在网格上的项目将根据算法放置。 我们使用 grid-column-start, grid-column-end, grid-row-start 和 grid-row-end定义项目在网格上的开始和结束位置：
.box-1 {
grid-column-start: 1;
grid-column-end: 3;
}
.box-3 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
或者我们可以使用 grid-column 和 grid-row 速记来获得相同的结果：
.box-1 {
grid-column: 1 / 3;
}
.box-3 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
这是现在生成的网格：
👉 间隙不会添加新的网格线，因此彼此相邻的项目实际上是接触同一条线，即使有间隙将它们分开。
今天的 CSS 网格布局
不幸的是，网格布局仍然不可用。 这是当前的可用性：
- Firefox 自 52 版起默认支持。
- 完全支持最新的 Chrome 和 Opera 背后的标志。
- 在 IE 和 Edge 中受支持，但语法较旧。
- 在最新的 Safari 技术预览版中可用。
Chrome 应该会在 2017 年 3 月发布 一个默认启用 Grid 的版本。 所以它很快就会到来，2017 年很可能是 CSS Grid 的一年！
在 Chrome 中启用
要在 Chrome 中启用 CSS Grid，请转到 chrome://flags/，查找 Experimental Web Platform features 并启用它。
在 Firefox 中启用
Firefox 52 及更高版本现在支持开箱即用的网格布局。
了解更多
我们保持这篇文章简短而温馨，但是有许多新概念需要使用 CSS Grid 学习，因此我们将其中的许多概念拆分为他们自己的帖子：
进一步阅读
这里有一些很好的资源来学习 CSS Grid 的来龙去脉：
