简单地说，CSS Grid是第一个真正的布局引擎之一，从现代需求的基础上设计(华丽的方式说，你可以设计一个网站非常有创意的方式）.

它不仅允许真正卓越的网站，它也为今天的web开发的未来奠定了基础。

如果你做任何与网站建设相关的工作，你需要知道CSS网格。

我们会教你的你需要的一切这样你就可以开始使用这个令人兴奋的布局引擎了。

你在这里看到的行将是一个可视化的帮助，因为我们解释CSS网格是如何工作的。

首先，让我们看一下创建网格所需的代码(现在还看不到网格)。

.the-grid{显示:网格;｝

就是这样!我们刚刚创建了第一个网格。吹响喇叭!

但它还没有做太多。我们只创建了网格容器,我们需要给它一些网格项目看看它在做什么。

在下一个屏幕中，我们将使用一个示例，以便您可以看到在开始构建网格时它是如何工作的。

CSS Grid最酷的部分之一是如何具体的它是。制作布局就像一行新的CSS并为每一行指定值一样简单跟踪补充道。把轨道看作放置内容的通道。

这里，我们正在跨越水平轴(称为X轴)通过添加一定大小的列使用称为grid-template-columns属性:

.the-grid{显示:网格;Grid-template-columns: 200px 300px 400px;｝

(如果你感到不知所措，别担心!我们只是在向你展示管理一切的简单方法之前向你展示它是如何工作的)。

在上面的例子中，我们使用像素值(px)来设置我们的间距。这很好，但还有另一种更灵活的选择。

如果需要等宽列，则fr单位是开始的地方。这灵活的小伙子你算出来了吗并将智能地增大或减小自己的大小，以填充网格中的所有剩余空间。

而百分比则比较挑剔，如果你想增加空格，就需要经常维护之间的项目,fr单位只是随大流，这是有帮助的，因为在这个布局中，事情开始感觉有点局促。如果可以就太好了给它一个间隙什么的……

你不知道吗，CSS网格已经覆盖了我们再一次用一种叫做grid-gap财产。看看它如何通过拖动下面的白色圆圈来帮助我们的网格间距。

试试吧!

.the-grid{显示:网格;grid-gap:px;网格模板列:1fr 1fr1 fr；｝

现在，我们正在加快速度，是时候揭示CSS Grid真正的超级能力了:二维关系。

CSS Grid是第一个让我们完全控制模板的规范这两个X(水平)和Y(垂直)轴在我们的布局。认识你的新朋友grid-template-rows：

.the-grid{显示:网格;grid-gap:px;网格模板列:1fr 1fr1 fr；Grid-template-rows: 1fr 2fr1 fr；｝

以前，我们的网格项溢出到“自动生成的”行轨道中，因为它们的计数大于可用列的数量。现在，我们明确地告诉网格给我们一个高度为的初始行1 fr第二行高为2 fr．

除了我们的fr单位是灵活的,这也是关系,这意味着它可以相对于轴上的其他项目来调整自己的大小。在这种情况下，我们实际上告诉第二行轨道是两倍高作为第一行轨迹。

提示:这里要记住的一件重要的事情是我们在调整跟踪,而不是物品本身。这对于利用CSS Grid的另一个强大功能至关重要:证明和对齐。

这两个属性都指的是网格项如何在各自的特定轴上定向细胞。justify-items属于X轴。对齐项目属于Y轴。

到目前为止，我们的网格项目一直在使用拉伸对于这些属性，我们也可以使用任意组合开始，中心,结束在每个轴上实现每个布局的众多变化。尝试使用右下角的箭头!

.the-grid{显示:网格;grid-gap:px;网格模板列:1fr 1fr1 fr；网格模板行:1fr 2fr;justify-items:；对齐项目:；｝

注意上面的代码片段，以及单击按钮时它是如何变化的。这只是一个例子如何在单元格中放置网格项。

CSS网格的一部分未来网页设计。投入时间去学习今天确保你的网站有一个坚实的基础明天。

的最重要的是要记住CSS Grid是第一个真正的布局引擎之一，它是根据现代web开发人员的需求从头开始构建的。

如果你有梦想，你就可以用Grid来实现它。信不信由你，我们甚至还没有触及所有CSS网格可能性的表面。

还记得我们说过有一个容易怎么把这一切都集中起来?