预备知识:	HTML基础 (学习 Introduction to HTML), 以及了解CSS如何工作的(学习 Introduction to CSS 和 Styling boxes.)
目标:	要了解网格布局系统背后的基本概念，以及如何在一个网页上实现一个网格布局。

什么是网格布局?

网格是一系列简单的集合 of 水平的和垂直的线 creating a pattern against which we can line up our design elements. They help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites.

一个典型的网格具有 列, 行, 接着是每行和每列之间的间隙 — 通常被称为沟槽.

[临时图; 将很快被更好的图替换。]

在你的项目中使用一个"网格系统"

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

你的"网格系统"只是一个决定，在设计过程中使用一个规则的网格。如果你的设计开始在一个图形编辑应用程序，如Photoshop的生活，你可以创建一个网格，以参考在 "http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/"class ="external"> Elliot的更好的Photoshop网格的响应式网页设计 杰伊股票。

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

创建简单的网格框架

我们将会从如何为你的项目建立一个简单的网格框架开始。

当前创建网格布局的主要方法是使用float. 如果你已经阅读了 our previous article about floats, you’ve already seen how we can use this technique to create a multiple column layout — which is the essence of any grid system using this method.

最简单的网格布局是创建一个固定宽度的—我们只需要知道我们设计所需的总宽度，我们需要多少列，gutters和每一列都应该有多宽。 If we instead decided to lay out our design on a grid with columns that grow and shrink according to browser width, we would need to calculate percentage widths for the columns and  gutters between them.

In the next sections we will look at how to create both. 我们将创建一个有十二列的网格— a very common choice that is seen to be very adaptable to different situations given that 12 is nicely divisible by 6, 4, 3, and 2.

一个简单的固定宽度网格

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

首先制作样本的本地副本 external"> 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>

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

;">

In the <style> element, add the following code, which first makes all the elements on the page sized as border boxes and then gives the wrapper container a width of 980 pixels, with padding on the right hand side of 20 pixels. This leaves us with 960 pixels for our total column/gutter widths.

* {
  box-sizing: border-box;
}
    

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}

现在使用包围在网格的每一行的行容器从另一行中清除一行。 在上一个规则下面添加以下规则:

.row {
  clear: both;
}

使用这个clear意味着我们不需要把每一行用元素填满十二列，这些行仍会是分开的，并且不会影响其他行。

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

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

Our next step is to create a rule for the class .col,  floating it left, giving it a margin-left of 20 pixels to form the gutter, and a width of 60 pixels. Add the following rule to the bottom of your CSS:

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

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

Layout containers that we want to span more than one column need to be given special classes to adjust their width values to the required number of columns (plus gutters in between). We need to create an additional class to allow containers to span 2 to 12 columns. Each width is the result of adding up the column width of that number of columns plus the gutter widths, which will always number one less than the number of columns.

在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>

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

创建一个流式网格

我们的网格工作得很好，但它有一个固定的宽度。 我们真的需要一个灵活的(流体)网格，它会随着浏览器中的可用空间而增长和缩小 "view ="viewport:viewport表示当前正在查看的计算机图形中的多边形(通常为矩形)区域。在web浏览器术语中，它指的是可见网站内容占用的浏览器部分。 。 为了实现这一点，我们可以使用参考像素宽度并将其转换为百分比。

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

target / context = result

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

60 / 960 = 0.0625

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

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

20 / 960 = 0.02083333333

So we need to replace the 20 pixel margin-left on our .col rule and the 20 pixel padding-right on .wrapper with 2.08333333%.

Updating our grid

要开始使用本部分，请制作您之前的示例页面的新副本，或制作我们的 -layout / grids / simple-grid-finished.html"class ="external"> simple-grid-finished.html 代码作为起点。

更新第二个CSS规则(使用 .wrapper 选择器)，如下所示:

body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

Not only have we given it a percentage width, we have also added a {cssxref("max-width")}} property in order to stop the layout becoming too wide.

接下来，更新第四个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". See this example from a MediaRecorder API tutorial.

无论如何，回到我们的网格！ 跨越网格的多个列的任何列具有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 等，类。

These are not the only approach. You could instead decide on your grid and then add the sizing information to the rules for existing semantic classes. For example, if you had a <div> with a class of content on it that you wanted to span 8 columns, you could copy across the width from the span8 class, giving you a rule like so:

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

尝试加载和刷新以查看差异，或查看我们的 html"class ="external"> fluid-grid-offset.html example(see it fluid-grid-offset.html"class ="external">运行实时)。 完成的示例应如下所示:

;">

浮动网格限制

当使用这样的系统时，您需要注意，您的总宽度加起来正确，并且您不包括在行包含比该行可能包含更多的列的元素。 由于浮动工作方式，如果网格列的数量对于网格变得太宽，则末端上的元素将下降到下一行，打破网格。

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

这个系统的最大限制是它基本上是一维的。 我们正在处理列，跨越列而不跨行元素。 这些旧的布局方法非常难以控制元素的高度，而没有明确设置高度，这是一个非常不灵活的方法 - 它只有当你能保证你的内容将是一定的高度才有效。

Flexbox 网格?

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

然而，flexbox从来没有被设计为网格系统，并且在作为一个系统使用时提出了一系列新的挑战。 作为一个简单的例子，我们可以采用上面使用的相同的示例标记，并使用下面的CSS来设置 wrapper ， row 和 代码>类:

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

您可以在自己的示例中尝试这些替换，或查看我们的 html"class ="external"> flexbox-grid.html 示例代码(参见 -grid.html"class ="external"> running live )。

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

On .col we set the flex property's first value (flex-grow) to 1 so our items can grow, the second value (flex-shrink) to 1 so the items can shrink, and the third value (flex-basis) to auto. As our element has a width set, auto will use that width as the flex-basis value.

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

;">

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

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

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

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

第三方网格系统

现在我们了解了我们的网格计算背后的数学，我们是一个很好的地方看看一些第三方网格系统的共同使用。 如果你在网上搜索"CSS Grid框架"，你会发现一个巨大的选项列表可供选择。 流行的框架，例如 Bootstrap 和 ">基金会包括网格系统。 还有独立的网格系统，使用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>

To start using Skeleton we need to give the wrapper <div> a class of container — this is already included in our HTML. This centers the content with a maximum width of 960 pixels. You can see how the boxes now never become wider than 960 pixels.

You can take a look in the skeleton.css file to see the CSS that is used when we apply this class. The <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. Skeleton also sets the box-sizing property to border-box like we did earlier, so the padding and borders of this element will be included in the total width.

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

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

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

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

<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_Grid_Layout"> CSS网格布局模块。

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

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

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

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

构建一个原生网格

首先，请先创建 "external"> 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 类，然后所有的子元素只是直接出现在包装器里面 - 没有行元素。 我们已经将一个类添加到应该跨越多个列的项目。

Now add the following into the <style> element:

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

Here we set the .wrapper rule so it is 90% of the body width, centered, and has a max-width of 960px.

Now for the CSS grid properties. We can declare a grid using the grid value of the display property, set up a gutter with the grid-gap property and then create a grid of 12 columns of equal width using grid-template-columns, the new repeat() function, and a new unit defined for grid layout — the fr unit.

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

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

;">

To style the containers that span multiple column tracks on the grid we can use the grid-column property. To span 6 columns for example:

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

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

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

您可以通过将以下内容替换最后一个4 col < 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>

Here we've deliberately added in some line break (<br>) tags to force some of the columns to become taller than others. If you try saving and refreshing, you'll see that the columns adjust their height to be as tall as the tallest container, so everything stays neat and tidy.

最终的布局如下:

;">

其他不错的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布局简介中，我们包括了有关 CSS表格的部分 >，其中包含一个简单的形式示例(请参阅 class ="external-icon external"> css-tables-example.html live示例，以及 style-box / box-model-recap / css-tables-example.html"class ="external-icon external">源代码)。 我们希望您复制此示例，并执行以下操作:

1. Remove the <div> elements inside the <form> — you no longer need these, as CSS Grids can handle placing the content on rows and columns for you.
2. Use the CSS grid properties to create a layout for your form as close to the original as you can get. You will have to set a width on the containing element, and think about how to set column gaps as well as row gaps.

概要

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