网格

网格是一个成熟的设计工具，许多现代网站布局是基于规则网格。在本文中，我们将看看基于网格的设计，以及如何使用CSS来创建网格 - 两者与当前的工具，和刚刚开始在浏览器中可用的新技术。

什么是网格布局？

网格仅仅是水平和垂直线的集合，创建了一种模式，我们可以根据这种模式排列我们的设计元素。他们帮助我们创建设计，其中元素不跳动或改变宽度，因为我们从一个页面到另一个页面，提供更大的一致性在我们的网站。

网格通常具有列，行，然后在每行和列之间的间隙 - 通常称为沟槽。

[临时图： 将很快替换更好的图片。]

在你的项目中使用“网格系统”

为了确保整个网站或应用程序的一致性体验，从一开始就将其置于网格系统上，这意味着您不需要考虑某个元素相对于其他元素的宽度。您的选择限于“此元素将跨越的网格的多少列”。

您的“网格系统”可以简单地是在设计过程中使用常规网格的决策。如果你的设计开始在一个图形编辑应用程序，如Photoshop的话，你可以创建一个网格，在该过程中所描述的 一个更好的Photoshop网格响应网页设计由艾利特杰伊提供。

你的网格系统也可能是一个框架 - 第三方或你只是为你的项目创建的 — 用来通过CSS强制网格。

创建简单的网格框架

首先，看看我们将如何为你的项目创建一个简单的网格框架。

如果你阅读过我们前面关于浮动的文章，目前大多数网格类型布局是使用浮动创建的。你可以看到我们如何使用这种技术来创建一个多列布局 — 这是任何使用网格系统的本质方法。

要创建的最简单的网格框架类型是固定宽度的 - 我们只需要计算出我们想要设计的总宽度。想要多少列，以及水槽和列的宽度。如果我们决定在具有根据浏览器宽度增长和缩小的列的网格上布置设计，我们需要计算出它们之间的列和间距的百分比宽度。

我们将创建一个12列网格  — 一个非常常见的，被认为是非常适应不同的情况，因为12是可以被6，4，3和2整除的。在接下来的部分中，我们会讨论如何创建这两者。

一个简单的固定宽度网格

首先，创建一个使用固定宽度列的网格系统。

制作本地样本simple-grid.html的文件副本，该文件在其正文中包含以下标记。

<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>
  </div>
</div>

顶行显示各列的大小，第二行显示网格上一些不同大小的区域 — 目的是将其转换为十行列上的两行演示网格。

首先，将页面上所有元素的大小设置为边框，然后为包装容器提供980像素的宽度。右侧=填充20像素，这使总共列/沟槽宽度960像素。在<style>元素中，添加以下代码。

* {
  box-sizing: border-box;
}
body {
  width: 980px;
  margin: 0 auto;
}
.wrapper {
  padding-right: 20px;
}

在网格的每一行的行容器从另一行中清除一行，在上一个规则下面添加以下规则：

.row {
  clear: both;
}

此清除意味着我们不需要应用构成完整十二列的元素去填充每一行。行将保持分离，并且彼此不干扰。

列之间的间距为20像素宽。我们在每列的左侧（包括第一列）创建这些水槽作为边缘，以平衡容器右侧的填充的20像素。所以，我们共有12个水槽 — 12×20 = 240。

如果现在我们把它除以12，需要从960像素的总宽度中减去它，为列提供720像素。每列应该是60像素宽。

下一步是为类创建一个规则，将.col其左移，给它一个margin-left20像素形成一个水槽，一个width60像素。将以下规则添加到CSS的底部：

.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}

单列的顶行现在将整齐地排列为网格。

我们要跨越多个列的布局容器需要被赋予特殊的类来将它们的width值调整到所需的列数（加上之间的间距）。我们需要创建一个额外的类，以允许容器跨越2到12列。每个宽度是将该列数的列宽加上装订线宽度相加得到的结果，总是比列数少1。

在CSS的底部添加以下内容：

/* Two column widths (120px) plus one gutter width (20px) */
.col.span2 { width: 140px; }
/* Three column widths (180px) plus two gutter widths (40px) */
.col.span3 { width: 220px; }
/* And so on... */
.col.span4 { width: 300px; }
.col.span5 { width: 380px; }
.col.span6 { width: 460px; }
.col.span7 { width: 540px; }
.col.span8 { width: 620px; }
.col.span9 { width: 700px; }
.col.span10 { width: 780px; }
.col.span11 { width: 860px; }
.col.span12 { width: 940px; }

创建这些类后，我们现在可以在网格上布置不同的宽度列。尝试保存并在浏览器中加载页面以查看效果。

尝试修改元素上的类，添加和删除一些容器，看看如何改变布局。例如，您可以使第二行如下所示：

<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>

现在你有一个网格系统工作！你可以简单地定义行和每一行的列数，然后填充每个容器所需的内容。

创建流体网格

我们的网格工作得很好，但它有一个固定的宽度。我们真的想要一个灵活（流体）网格，它将随着浏览器视口中的可用空间而增长和缩小。为了实现这一点，我们可以使用参考像素宽度并将其转换为百分比。

基于百分比将固定宽度变为灵活的方程如下。

target / context = result

上下文包装是960像素，对于列宽，目标宽度是60像素，我们可以使用以下计算百分比。

60 / 960 = 0.0625

然后我们移动小数点2个位置，给出6.25％的百分比。因此，在我们的CSS中，我们可以替换60像素列宽度为6.25％。

我们需要对沟槽宽度做同样的事情：

20 / 960 = 0.02083333333

因此，我们需要更换20像素margin-left在我们的.col规则和20像素padding-right的.wrapper有2.08333333％。

更新网格

要开始使用本部分，请制作您之前的示例页面的新副本，或者将我们的simple-grid-finished.html代码的本地副本用作起点。

更新第二个CSS规则（使用.wrapper选择器）如下：

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}
.wrapper {
  padding-right: 2.08333333%;
}

不仅我们给了它一个百分比width，我们还添加了一个max-width属性，以阻止布局变得太宽。

接下来，更新第四个CSS规则（使用.col选择器）如下：

.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}

现在来看稍微更费力的部分 —  我们需要更新所有的.col.span规则，使用百分比而不是像素宽度。这需要一点时间与计算器; 为了省你一些努力，我们已经为你做了下面。

使用以下内容更新CSS规则的底部块：

/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span2 { width: 14.58333333%; }
/* Three column widths (18.75%) plus two gutter widths (4.1666666) */
.col.span3 { width: 22.91666666%; }
/* And so on... */
.col.span4 { width: 31.24999999%; }
.col.span5 { width: 39.58333332%; }
.col.span6 { width: 47.91666665%; }
.col.span7 { width: 56.24999998%; }
.col.span8 { width: 64.58333331%; }
.col.span9 { width: 72.91666664%; }
.col.span10 { width: 81.24999997%; }
.col.span11 { width: 89.5833333%; }
.col.span12 { width: 97.91666663%; }

现在保存您的代码，在浏览器中加载它，并尝试更改视口宽度 - 您应该看到列宽调整很好地适合！

使用calc() 函数更容易的计算

你可以使用calc()函数在你的CSS里面做数学 — 这允许你插入简单的数学方程到你的CSS值，计算一个值应该是什么。当需要执行复杂的数学运算时，它是特别有用的，甚至可以计算使用不同单位的计算，例如“我希望此元素的高度始终为父级高度的100％，减去50px”。从MediaRecorder API教程中查看此示例。

无论如何，回到我们的网格！跨越网格的多个列的任何列具有6.25％的总宽度乘以跨越的列数加上2.08333333％乘以槽的数量（其将总是列数减去1）。该calc()函数允许我们在宽度值内部执行此计算，因此对于跨4列的任何项目，我们可以执行此操作，例如：

.col.span4 {
  width: calc((6.25%*4) + (2.08333333%*3));
}

尝试使用以下代码替换您的底部规则，然后在浏览器中重新加载它，看看是否得到相同的结果：

.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }

语义与“非语义”网格系统

向您的标记添加类来定义布局意味着您的内容和标记与其视觉呈现相关联。有时你会听到这种使用描述为“非语义”的CSS类 - 描述内容的外观 - 而不是描述内容的类的语义使用。这与我们的情况下span2，span3类，等等。

这些不是唯一的办法，你可以改为决定网格。然后将大小信息添加到现有语义类的规则中。例如，如果你有一个<div>类content，你想跨越8列，你可以复制从span8类的宽度，给你一个像这样的规则：

.content {
  width: calc((6.25%*8) + (2.08333333%*7));
}

在网格中启用偏移容器

我们创建的网格工作良好，只要我们想要启动所有的容器与网格的左手边齐平。如果我们想在第一个容器之前留下一个空的列空间 - 或者在容器之间 - 我们需要创建一个偏移类来添加一个左边距到我们的网站，以推动它在网格上。更多数学！

让我们试试这个。

从您之前的代码开始，或使用我们的fluid-grid.html文件作为起点。

让我们在CSS中创建一个类，它将容器元素偏移一列宽度。将以下内容添加到CSS的底部：

.offset-by-one {
  margin-left: calc(6.25% + (2.08333333%*2));
}

如果你喜欢自己计算百分比，请使用这一个：

.offset-by-one {
  margin-left: 10.41666666%;
}

现在可以将此类添加到任何容器，列如你要在其左侧留下一列宽的空白。在HTML中添加这个：

<div class="col span6">14</div>

尝试替换它

<div class="col span5 offset-by-one">14</div>

尝试加载和刷新以查看差异，或查看我们的fluid-grid-offset.html示例（见它也运行live）。完成的示例应如下所示：

浮动网格限制

当使用浮动网格时，你需要注意：你的总宽度要加起来正确，并且你不能在一行中包含跨（越）度为多列的超过该行所能包含的元素。由于浮动工作方式，如果网格列的数量相对于网格变得太宽，则末端上的元素将下降到下一行，从而打破网格。

还要记住，元素的内容比它们占据的行更宽，它会溢出，会看起来像一团糟。

这个系统的最大限制是它基本上是一维的。我们处理的是列，在列中套上元素，而不是行（原文：spanning elements across columns, but not rows，翻译不知准不）。这些旧的布局方法非常难以控制元素的高度，而没有明确设置高度，这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。

Flexbox 网格?

如果你阅读我们以前关于flexbox的文章，可能会认为flexbox是创建网格系统的理想解决方案。目前有任何数量的基于flexbox的网格系统可用，flexbox可以解决我们在创建上面的网格时已经发现的许多问题。

然而，flexbox从来没有被设计为网格系统，并且在作为一体时提出了一系列新的挑战。作为一个简单的例子，我们可以把我们上面使用同样的例子标记和使用以下CSS样式的wrapper，row和col类：

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}
.wrapper {
  padding-right: 2.08333333%;
}
.row {
  display: flex;
}
.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255,150,150);
}

你可以在你自己的例子中尝试这些替换，或者看看我们的flexbox-grid.html示例代码（看它如何运行）。

这里我们把每一行变成一个flex容器。使用基于flexbox的网格，我们仍然需要行，以便允许我们添加小于100％的元素。我们设置该容器display: flex。

在.col我们将flex属性的第一个值（flex-grow）设置为1，项目可以增长，第二个值（flex-shrink）为1，所以项目可以收缩，第三个值（flex-basis）auto。由于我们的元素有一个width集合，auto将使用该宽度作为flex-basis值。

在顶端，我们在网格上获得十二个整洁的盒子，并且它们随着我们改变视口宽度而同样地增长和收缩。然而，在下一行，我们只有四个项目，这些也从60px基础增长和收缩。只有四个他们可以增长比上面的行中的项目多，结果是他们都占据第二行相同的宽度。

为了解决这个问题，我们仍然需要包含我们的span类来提供一个宽度来替换flex-basis那个元素所使用的值。

他们也不尊重上面的网格，因为他们不知道如何使用它。

Flexbox是一维设计。它处理单个维度，即行或列。不能为列和行创建严格的网格，这意味着如果我们要为网格使用flexbox，我们仍然需要为浮动布局计算百分比。

在您的项目中，您可能仍然选择使用flexbox'grid'，因为flexbox提供的额外对齐和空间分布能力超过浮动。但是，您应该知道，您仍在使用工具，而不是它的设计目的。所以你可能会觉得它让你跳过额外的箍，得到你想要的最终结果。

第三方网格系统

现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。如果你在网上搜索“CSS Grid框架”，你会发现一个巨大的选项列表可供选择。流行的框架如Bootstrap和Foundation包括一个网格系统。还有独立的网格系统，使用CSS或使用预处理器开发。

让我们来看看这些独立系统之一，因为它演示了使用网格框架的常见技术。我们将使用的网格是Skeleton的一部分，一个简单的CSS框架。

开始访问Skeleton网站，并选择“下载”以下载ZIP文件，解压缩此文件并将skeleton.css和normalize.css文件复制到一个新目录中。

制作我们的html-skeleton.html文件副本，并将其保存在与骨架相同的目录中，并规范化CSS。

在HTML页面中包含骨架并规范化CSS，方法是在其头部添加以下内容：

<link href="normalize.css" rel="stylesheet">
<link href="skeleton.css" rel="stylesheet">

Skeleton不仅仅包括一个网格系统 - 它还包含用于排版的CSS和其他可以用作起点的页面元素。我们现在将这些默认值，但是 - 这是我们真正感兴趣的网格在这里。

我们将使用类似的HTML到我们前面的例子。在您的HTML内文中添加以下内容：

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>
  </div>
</div>

要开始使用Skeleton，我们需要给包装器<div>一个类container- 这已经包括在我们的HTML中。这将以960像素的最大宽度为中心。你可以看到盒子现在从不变得宽于960像素。

你可以看一下skeleton.css文件，看看我们应用这个类时使用的CSS。在<div>使用居中auto左，右页边距，以及20像素的填充应用于左侧和右侧。Skeleton也设置box-sizing属性border-box像我们以前做的，所以此元素的填充和边框将包括在总宽度。

.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

元素只能是网格的一部分（如果它们在一行内），因此与前面的示例一样，我们需要一个额外的<div>或其他元素，其中一个类row嵌套在content <div>实际的内容容器之间<div>。我们已经做到了这一点。

现在让我们布置集装箱。骨架基于12列网格。顶行框都需要类，one column以使它们跨越一列。

现在添加这些，如下面的代码段所示：

<div class="container">
  <div class="row">
    <div class="col one column">1</div>
    <div class="col one column">2</div>
    <div class="col one column">3</div>
    /* and so on */
  </div>
</div>

接下来，给出第二行类上的容器，解释它们应该跨越的列数，如下：

<div class="row">
  <div class="col one column">13</div>
  <div class="col six columns">14</div>
  <div class="col three columns">15</div>
  <div class="col two columns">16</div>
</div>

尝试保存HTML文件并将其加载到浏览器中以查看效果。

如果你看看skeleton.css文件，你可以看到这是如何工作的。例如，Skeleton对下面定义的样式元素添加了“三列”类。

.three.columns { width: 22%; }

所有的Skeleton（或任何其他网格框架）正在设置预定义的类，您可以通过将它们添加到您的标记使用。这和你自己计算这些百分比的工作完全一样。

正如你所看到的，当使用Skeleton时，我们需要写很少的CSS。它处理所有的浮动我们当我们添加类到我们的标记。正是这种将布局的责任转移到其他使网格系统的框架成为一个引人注目的选择的能力！

骨架是比你可能遇到的一些框架更简单的网格系统。大型框架（如Bootstrap和Foundation）中的网格为各种屏幕宽度提供了更多的功能和额外的断点。但是，它们都以类似的方式工作 - 通过向您的标记添加特定类，您可以使用预定义网格控制元素的布局。

本地CSS栅格与网格布局

我们在本文一开始所说的，CSS的之前没有过一个真正的体系，用于创建网格布局。但这将会改变。在未来的一年，大家应该可以看到浏览器会出现支持对于CSS的网格布局模块。

目前，您只能使用我们将在浏览器中显示您的技术，这些浏览器正在实现CSS网格布局“标志后面” - 这意味着它目前已实现，但处于实验状态，您需要开启使用。

例如，在Firefox中，您需要导航到一个URL about:config，搜索layout.css.grid.enabled首选项，然后双击它以启用CSS网格。你可以通过访问Grid by Example来了解如何在其他浏览器中使用它。

我们看过上面的Skeleton Grid框架 - 像其他第三方网格，甚至是手工构建的网格，它需要你添加<div>s形成行，然后指定这些行中的项目将跨越的列数。

使用CSS网格布局，您可以完全在CSS中指定网格，而不需要将这些帮助类添加到标记。让我们看看我们的简单示例，看看我们将如何使用CSS Grid Layout创建相同的布局。

构建本地网格

首先，通过制作css-grid.html文件的本地副本来开始。它包含以下标记：

<div class="wrapper">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col span6">14</div>
  <div class="col span3">15</div>
  <div class="col span2">16</div>
</div>

这次我们有一个父<div>类的类wrapper，所有的子元素只是直接出现在包装器内 - 没有行元素。我们已经将一个类添加到应该跨越多个列的项目。

现在将以下内容添加到<style>元素中：

.wrapper {
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}
.col {
  background: rgb(255,150,150);
}

这里我们设置.wrapper规则，因此它是90％的身体宽度，居中，并具有max-width960px。

现在为CSS网格属性。我们可以使用属性的grid值声明一个网格，使用该display属性设置grid-gap一个网格，然后使用grid-template-columns新的repeat()函数和为网格布局定义的新单元创建一个12列相等宽度的网格 - fr单位。

该fr单元是一小部分单元-它描述在网格容器的可用空间的一小部分。如果所有列都是1fr，它们将占用相等的空间量。这消除了计算百分比以创建灵活网格的需要。

创建网格后，网格自动布局规则将立即在这个网格上布置我们的框，我们得到一个十二列灵活的网格布局。

要对跨越网格上的多个列轨道的容器进行样式化，我们可以使用该grid-column属性。跨6列例如：

.span6 {
  grid-column: auto / span 6;
}

跨越3：

.span3 {
  grid-column: auto / span 3;
}

正斜杠之前的值是开始行 - 在这种情况下，我们没有明确设置，允许浏览器将项目放在下一个可用的行。然后我们可以设置它跨越6，3或我们想要的许多行。

在CSS的底部添加以下内容：

.span2 { grid-column: auto / span 2;}
.span3 { grid-column: auto / span 3;}
.span4 { grid-column: auto / span 4;}
.span5 { grid-column: auto / span 5;}
.span6 { grid-column: auto / span 6;}
.span7 { grid-column: auto / span 7;}
.span8 { grid-column: auto / span 8;}
.span9 { grid-column: auto / span 9;}
.span10 { grid-column: auto / span 10;}
.span11 { grid-column: auto / span 11;}
.span12 { grid-column: auto / span 12;}

OK！尝试保存和刷新，你会看到容器适当地跨多个列。

CSS网格是二维的，因此随着布局的增长和缩小，元素保持水平和垂直排列。

您可以通过将以下内容替换最后的4个字符串来进行测试<div>：

<div class="col">13some<br>content</div>
<div class="col span6">14this<br>is<br>more<br>content</div>
<div class="col span3">15this<br>is<br>less</div>
<div class="col span2">16</div>

这里我们有意添加了一些行break（<br>）标签，以强制某些列变得比其他列高。如果你尝试保存和刷新，你会看到列的高度调整为与最高的容器一样高，所以一切都保持整洁。

最终的布局如下：

一些不错的CSS网格特性

对于CSS网格，我们不需要通过边距来抵消它们。尝试在您的CSS中进行这些更改：

.content {
  grid-column: 2 / 8;
}

<div class="col span2 content">16</div>

容器16，现在将下一个可用的行上跨越第2列到第8列。

我们可以同样轻松地涵盖行作为列：

.content {
  grid-column: 2 / 8;
  grid-row: 3 / 5;
}

现在将容器16，跨越行3至5以及列2至8。

不需要使用边距伪造水槽或显式计算它们的宽度 — CSS网格具有这种功能内置的grid-gap属性。

我们只是触摸CSS Grid Layout可能的表面，但在本文的上下文中要理解的关键是，你不需要创建一个网格系统与网格 - 它是一个。您可以编写CSS，将项目直接放置到预定义的网格上。这是第一次使用CSS是可能的，这将获得更多的使用一次浏览器支持固化。

主动学习：编写自己的简单网格

在CSS布局aticle简介中，我们包括一个关于CSS表的部分，其中包括一个简单的形式示例（参见css-tables-example.html实例和源代码）。我们希望您复制此示例，并执行以下操作：

1. 删除 <div>里面 的 <form>元素 —  将会对你的内容处理行数和列。就不再需要此作为CSS栅格。
2. 使用CSS网格属性创建一个接近原始的表单布局，你必须设定容器元素的宽度，并思考怎么设置列的的间隙和行差距。

概要

概要阅读这篇文章后，你应该已经了解了网格布局和网格框架如何在CSS中工作。你也已经窥探未来的CSS网格，现在应该明白，我们今天使用的网格框架本质上是一个stopgap解决方案，直到我们有一个广泛支持的本地方式在CSS中实现这一点。