5分钟学会CSS网格

网格布局是网站设计的基础，而 CSS Grid 模块是创建网格布局最强大、最便捷的工具。我个人认为它比 Bootstrap 等工具好用得多（点击此处了解原因）。

该模块也得到了主流浏览器（Safari、Chrome、Firefox、Edge）的原生支持，所以我相信在不久的将来所有前端开发人员都必须学习这项技术。

在本文中，我将带您尽快了解 CSS 网格的基础知识。我将省略所有您不需要了解的内容，直到您理解了基础知识为止。

我还创建了一个免费的 CSS Grid 课程。点击此处即可访问
。

或者，查看这篇文章，其中解释了您将在整个课程中学习的内容：

现在让我们开始吧！

您的第一个网格布局

CSS 网格的两个核心元素是包装器（父元素）和
项目（子元素）。包装器是实际的网格，而项目是网格内部的内容。

这是包含六个项目的包装器的标记：

    <div class="wrapper">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>

为了将我们的包装器div变成网格，我们只需给它显示以下内容
grid：

但是，这还没有任何作用，因为我们还没有定义网格的外观。它只是简单地将 6 个网格堆叠div's在一起。

我添加了一些样式，但这与 CSS 网格没有任何关系。

列和行

为了将其变为二维，我们需要定义列和行。让我们创建三列两行。我们将使用grid-template-row和grid-template-column属性。

由于我们为 写入了三个值grid-template-columns，因此将得到三列。由于我们为 指定了两个值，因此将得到两行grid-template-rows。

这些值决定了我们希望列的宽度（100px）以及行的高度（50px）。结果如下：

为了确保您正确理解值之间的关系以及网格的外观，请看一下这个例子。

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 50px 50px;
}

尽量掌握代码和布局之间的联系。

具体过程如下：

放置物品

接下来你需要学习如何在网格上放置项目。这才是你发挥超能力的地方，因为它让布局变得非常简单。

让我们创建一个 3x3 网格，使用与之前相同的标记。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

这将产生以下布局：

注意，我们在页面上看到的只是一个 3x2 的网格，而我们将其定义为 3x3 的网格。这是因为我们只有六个项目来填充网格。如果再多三个，那么最下面的一行也会被填满。

为了定位和调整项目的大小，我们将定位它们并使用grid-column和grid-row属性：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

这里我们想要让 item1 从第一条网格线开始，到第四条列线结束。换句话说，它将占据整行。

屏幕上的显示效果如下：

你是否感到疑惑，为什么我们只有 3 列，却有 4 条列线？请看这幅图，我用黑色画出了列线：

注意，我们现在使用了网格中的所有行。当我们让第一个元素占据整个第一行时，它会将其余元素向下推。

最后，我想展示一种更简单的编写上述语法的方法：

为了确保您正确理解这个概念，让我们稍微重新排列一下这些项目。

.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;
}

页面上的效果如下。试着想想为什么它看起来是这个样子。应该不难。

就是这样！

当然，还有很多概念我们还没讲过。如果你想学习这些概念，可以看看我在 Scrimba 上提供的免费 CSS Grid 课程。

如果您有任何疑问，请留言，我会尽力解答。或者，您也可以通过 Twitter联系我。