CSS网格布局：快速入门指南_极简慕枫

我们如何处理Web上的布局正在发生变化，并且在该变化的最前沿是CSS Grid Layout。这个更新的快速入门指南将跳过细节和细微差别，而不是帮助您陷入困境。重庆做网站

你的浏览器

CSS网格布局（其朋友称为“网格”）在去年实现了跨越式发展，因此您可以发现浏览器对它的支持非常可靠。 

设置网格

Grid允许我们根据指南创建的区域在页面上排列元素。

术语

最简单的是这些导轨或网格线，框架水平和垂直网格轨道。网格轨道用作  行和列，在它们之间运行排水沟。在水平和垂直网格轨道交叉的地方，我们留下了  单元格，就像我们使用表格一样。这些都是需要理解的重要术语。

在下图中，您将看到一个演示网格，显示： 

1. 网格线

2. 列

3. 行

4. 细胞

对于图形布局，如果我们使用完全相同的网格，它可能看起来更熟悉，但是部分轨道可以为我们提供内容区域之间的装订线。

1. 排水沟

在继续之前，我们需要澄清最后一个术语：

1. 网格区域

一个网格区域是我国电网的任何部分围栏由四个网格线; 它可以包括任意数量的网格单元。

是时候在浏览器中构建这个网格了！让我们从一些标记开始。

网格标记

要重新创建上面的网格，我们需要一个容器元素; 你喜欢的都可以：

在其中我们将放置九个子元素。

叉该起动笔，如果你想跟着一起。我添加了一些基本样式，以便在视觉上区分每个网格项。

网格规则

首先，我们需要使用display属性的新值声明我们的容器元素是一个网格：

对，这很容易。接下来，我们需要定义我们的网格，通过说明它将有多少网格轨道，水平和垂直。我们使用grid-template-columns  和  grid-template-rows 属性来做到这一点  ：

你会注意到每个值有三个值。grid-template-columns  “所有三列应为150px宽”的状态值  。grid-template-rows 状态的三个值  类似。实际上每个都是  auto默认的，从内容中获取高度，但我们在这里说明了它们，以便清楚地看到正在发生的事情。

那我们现在有什么？

我们的每个项目都按时间顺序自动分配了一个网格区域。这不错，但我们错过了排水沟。是时候解决这个问题。

注意间隔

Grid附带了一个专门用于声明天沟测量的解决方案。我们可以使用  grid-column-gap 和  grid-row-gap，或简写  grid-gap 属性。 

让我们为我们的.grid-1元素添加一个20px的固定装订线。

现在，我们留下了一个漂亮，整洁的网格：

结论

就是这样，你开始使用Grid！让我们回顾一下四个基本步骤：

1. 创建一个容器元素，并声明它display: grid;。

2. 使用相同的容器使用grid-template-columns  和  grid-template-rows 属性定义网格轨道  。

3. 将子元素放在容器中。

4. 使用grid-gap 属性指定装订线尺寸  。

重庆做网站