CSS 网格布局：快速入门

我们在 Web 上处理布局的方式正在发生变化，而最前沿的是css 网格布局。这个快速入门的 CSS 网格教程将跳过细节和细微差别，而是帮助您立即陷入困境。

CSS 网格布局和你的浏览器

CSS 网格布局（它的朋友们称之为“网格”）在过去几年里取得了长足的发展，因此你会发现现在浏览器对它的支持非常可靠。 

术语

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

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

1. 网格线

2. 列

3. 行

4. 细胞

对于图形布局，如果我们使用完全相同的网格，它可能看起来更熟悉，但将一些轨道分开以在内容区域之间为我们提供排水沟。

1. 排水沟

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

1. 网格区域

网格区域是由四条网格线围成的网格的任何部分；它可以包含任意数量的网格单元。

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

CSS 网格标记

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

<section class="grid-1"> </section>

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

<section class="grid-1">

  <div class="item-1">1</div>

  <div class="item-2">2</div>

  <div class="item-3">3</div>

  <div class="item-4">4</div>

  <div class="item-5">5</div>

  <div class="item-6">6</div>

  <div class="item-7">7</div>

  <div class="item-8">8</div>

  <div class="item-9">9</div>

</section>

如果您想跟随，请叉出这支入门笔。我添加了一些基本样式以在视觉上区分每个网格项目。

CSS 网格规则

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

.grid-1 {

  display: grid;

}

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

.grid-1 {

  display: grid;

  grid-template-columns: 150px 150px 150px;

  grid-template-rows: auto auto auto;

}

您会注意到每个都有三个值。状态值 grid-template-columns  “所有三列应为 150 像素宽”。grid-template-rows 状态相似的三个值 。每一个实际上都是 auto默认的，从内容中获取高度，但我们在这里声明它们是为了清楚地可视化正在发生的事情。

那么我们现在有什么？

See the Pen  CSS Grid Layout: A Quick Start Guide ii by Envato Tuts+ (@tutsplus)  on CodePen.

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

注意间隔

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

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

.grid-1 {

  display: grid;

  grid-template-columns: 150px 150px 150px;

  grid-template-rows: auto auto auto;

  grid-gap: 20px;

}

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

See the Pen  CSS Grid Layout: A Quick Start Guide iii by Envato Tuts+ (@tutsplus)  on CodePen.

结论

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

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

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

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

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

在下一个 CSS 网格教程 中，我们将深入了解 Grid 的语法，探索灵活的布局、fr单元、repeat()函数，并将我们的简单网格更进一步。到时候那里见！