这是对网站未来布局的快速介绍。
网格布局是网站设计的基础，CSS Grid 是创建网格布局最强大且最简单的工具。
CSS Grid 今年也获得了主流浏览器（Safari、Chrome、Firefox、Edge）的原生支持，所以我相信所有后端开发人员在不久的将来都必须学习这项技术。
在本文中，我将尽快介绍 CSS 网格的基础知识。 我将省略您不应该关心的所有内容，只是为了让您了解基础知识。
你的第一个网格布局
CSS 网格布局由两个核心组件wrapper（父元素）和items（子元素）组成。 wrapper 是实际的网格（grid），items 是网格（grid）的内容。
下面是一个包含 6 个项目的包装元素：
HTML 代码：
<div class="wrapper">
1
2
3
4
5
6
要使包装元素成为网格css3布局教程，只需将其显示属性设置为网格：
CSS代码：
.wrapper {
display: grid;
}
然而，这还没有做任何事情，因为我们还没有定义我们想要的网格。 它只会将 6 个 div 堆叠在一起。
我已经添加了一些样式，但这与 CSS Grid 无关。
列（列）和行（行）
为了使其成为二维网格容器，我们需要定义列和行。 让我们创建 3 列和 2 行。 我们将使用 grid-template-row 和 grid-template-column 属性。
CSS代码：
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
正如你所看到的，我们为 grid-template-columns 写了 3 个值，所以我们都会得到 3 列。 我们想要获取2行，所以我们为grid-template-rows指定2个值。
这些值决定了我们希望列的宽度 (100px) 以及我们希望行的高度 (50px)。
结果如下：
为了确保您了解该值与网格形状的关系，请查看此示例。
CSS代码：
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}
请尝试理解前面的代码并思考上面的代码将如何形成布局。
这是前面代码的布局结果：
它很容易理解，也很容易使用，不是吗？ 让我们让它变得更困难一点。
放置项目（子元素）
接下来需要学习的是如何将项目（子元素）放置在网格（grid）上。 请特别注意，这就是网格布局的超能力发挥作用的地方，因为它使创建布局变得非常简单。
我们使用与之前相同的 HTML 标记，为了帮助我们更好地理解，我们为每个项目（子元素）添加一个单独的类：
HTML 代码：
<div class="wrapper">
<div class="item1">1
<div class="item2">2
<div class="item3">3
<div class="item4">4
<div class="item5">5
<div class="item6">6
现在，让我们创建一个 3×3 网格：
CSS代码：
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
将产生以下布局：
不知道大家有没有注意到，我们在页面上只看到了3×2的网格（grid），但是我们定义的却是3×3的网格（grid）。 这是因为我们只有 6 个项目（子项）来填充网格。 如果我们再添加 3 个项目（子元素），那么最后一行也将被填充。
要定位项目（子项）并调整其大小，我们将使用 grid-column 和 grid-row 属性来设置：
CSS代码：
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
我们在这里想要做的是，我们希望 item1 占据从第一条网格线到第四条网格线。 换句话说，它将独立地抓取整行。 屏幕上显示的内容如下：
如果你不明白我们只有 3 列，为什么有 4 条网格线？ 看一下下图，我用红色绘制了列网格线：
请注意，我们现在正在使用网格中的所有行。 当我们使第一个项目（子项）占据整个第一行时，它将其余的项目（子项）推到下一行。
最后，这里有一个更简单的简写形式，供您组成里面的句子：
CSS代码：
.item1 {
grid-column: 1 / 4;
}
为了确保您的概念正确，让我们重新排列其他项目（子元素）。
CSS代码：
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
你可以尝试在脑子里过一遍代码的布局效果，应该不难。
以下是页面的布局效果：
网格布局非常简单。 当然css3布局教程，这里展示的是最简单的Grid布局概念，但是Grid布局系统还有更强大、更灵活的功能。
