css 网格布局_CSS网格布局：快速入门指南

css 网格布局

我们在网络上处理布局的方式正在发生变化，而最重要的变化是CSS Grid Layout 。 这个快速入门CSS网格教程将跳过细节和细微差别，而是帮助您立即加入。

CSS网格布局和浏览器

CSS Grid Layout（其朋友称其为“ Grid”）在过去的几年中突飞猛进，因此，如今您会发现浏览器对它的支持非常可靠。

设置网格布局

网格使我们可以根据指南创建的区域在页面上排列元素。

术语

这些指南或网格线最简单地构成水平和垂直网格轨道 。 网格轨迹用作行和列 ，它们之间运行着装订线。 在水平和垂直网格轨迹相交的地方，像单元格一样，我们剩下了单元格 。 这些都是需要理解的重要术语。

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

1. 网格线
2. 列
3. 行数
4. 细胞

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

1. 天沟

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

1. 网格面积

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

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

CSS网格标记

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

<section class="grid-1">

</section>

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

<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和grid-template-rows属性来实现：

.grid-1 {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: auto auto auto;
}

您会注意到每个值三个。 grid-template-columns的值表示“所有三列均应为150px宽”。 grid-template-rows的三个值表示类似的结果。 默认情况下，每个人实际上都是auto的，占据了内容的高度，但是我们在这里已对它们进行了说明，以清楚地看到正在发生的事情。

那么我们现在有什么呢？

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

注意间隔

Grid带有一个专用的解决方案，用于声明排水沟测量。 我们可以使用grid-column-gap和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;
}

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

结论

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

翻译自: https://webdesign.tutsplus.com/tutorials/css-grid-layout-quick-start-guide--cms-27238

css 网格布局