path: root/files/zh-cn/web/css/css_grid_layout/利用css网格布局实现常用布局/index.html

---
title: 利用CSS网格布局实现常用布局
slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局
translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
---
<p>为了完善这组CSS网格布局指南，我将介绍几种不同的布局，它们演示了在使用网格布局进行设计时可以使用的一些不同技术。我们将看到一个使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">grid-template-areas</a> 的示例，一个典型的12列灵活网格系统，以及一个使用自动布局的产品列表。正如您从这组示例中看到的，使用网格布局通常有不止一种方法来实现您想要的结果。选择对您正在解决的问题和需要实现的设计最有帮助的方法。</p>

<h2 id="使用网格模板区域的响应式布局，包含1到3个流动列">使用<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">网格模板区域</a>的响应式布局，包含1到3个流动列</h2>

<p>许多网站都是这种布局的变体，有内容、边栏、页眉和页脚。在响应式设计中，您可能希望将布局显示为单个列，在某个断点添加侧栏，然后为更宽的屏幕引入三列布局。</p>

<p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p>

<p>我将使用我们在向导<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">网格模板区域</a>中了解到的命名模板区域来创建这个布局。</p>

<p>我的标记是一个容器，其中包含用于标题、页脚、主要内容、导航、边栏和打算放置广告的块的元素。</p>

<div id="layout_1">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

    .wrapper {
        max-width: 1024px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    .wrapper &gt; * {
        border: 2px solid #f08c00;
        background-color: #ffec99;
        border-radius: 5px;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
        &lt;header class="main-head"&gt;The header&lt;/header&gt;
        &lt;nav class="main-nav"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;article class="content"&gt;
            &lt;h1&gt;Main article area&lt;/h1&gt;
            &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;
        &lt;/article&gt;
        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
&lt;/div&gt;
</pre>

<p>因为我们使用{{cssxref("grid-template-areas")}}来创建布局。在任何媒体查询之外，我需要命名区域。我们使用{{cssxref("grid-area")}} 属性命名区域。</p>

<pre class="brush: css">.main-head {
  grid-area: header;
}
.content {
  grid-area: content;
}
.main-nav {
  grid-area: nav;
}
.side {
  grid-area: sidebar;
}
.ad {
  grid-area: ad;
}
.main-footer {
  grid-area: footer;
}
</pre>

<p>这不会创建任何布局，但是我们的项目现在有了名称，我们可以使用它来创建布局。在任何媒体查询之外，我现在要为移动宽度设置布局。在这里，我保持源文件的顺序，试图避免源文件和显示之间的任何断开，就像向导网格布局和可访问性中描述的那样。我没有定义任何列或行跟踪，但是这种布局规定了单个列，并且将根据需要为隐式网格中的每个项目创建行。</p>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";
}
</pre>

<p>在设置了移动布局之后，我们将获得所有屏幕大小的这一列，现在我们可以添加一个媒体查询并重新定义布局，以满足屏幕空间足够显示两列的情况。</p>

<pre class="brush: css">@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
</pre>

<p>您可以看到布局在{{cssxref("grid-template-areas")}}的值中成形。 <code>header</code> 跨越两个列轨道，就像 <code>nav</code> 一样。在第三行轨道中，我们在 <code>content</code> 旁边有 <code>sidebar</code> 。在第四行轨道，我选择了放置我的广告内容-所以它出现在侧边栏下，然后 <code>footer</code> 旁边的内容。我在导航栏上使用了一个flexbox来显示它。</p>

<p>现在我可以添加最后一个断点来移动到三列布局。</p>

<pre class="brush: css">@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"
   }
   nav ul {
     flex-direction: column;
   }
}
</pre>

<p>三列布局有两个1fr单元侧列和一个中间列，轨道大小为4fr。这意味着容器中的可用空间被划分为6个部分，并按照我们的三个轨道的比例分配—每个轨道的一个部分位于侧列，四个部分位于中心。</p>

<p>在这个布局中，我在左边的列中显示导航，旁边是内容。在右边栏我们有侧边栏，在它下面是广告。页脚现在横跨布局的底部。然后我使用一个flex xbox将导航显示为一个列。</p>

<p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p>
</div>

<p>这是一个简单的示例，但是演示了如何使用网格布局来为不同的断点重新安排布局。具体来说，我正在更改广告块的位置，这在不同的列设置中是合适的。我发现这种命名区域的方法在原型制作阶段非常有用，很容易处理元素的位置。您可以始终以这种方式开始使用grid进行原型设计，即使由于访问您站点的浏览器的原因，您不能在生产中完全依赖它。</p>

<h2 id="灵活的12列布局">灵活的12列布局</h2>

<p>如果您使用过许多框架或网格系统之一，那么您可能已经习惯了将站点布置在12或16列的灵活网格上。我们可以使用CSS网格布局创建这种类型的系统。作为一个简单的例子，我正在创建一个12列的灵活网格，它有12个1fr-unit列轨道，它们都有一个名为<code>col-start</code> 的起始行。这意味着我们将拥有12条名为 <code>col-start</code> 的网格线。</p>

<div id="layout_2">
<div class="hidden">
<pre class="brush: css">.wrapper {
  max-width: 1024px;
  margin: 0 auto;
  font: 1.2em Helvetica, arial, sans-serif;
}
.wrapper &gt; * {
  border: 2px solid #f08c00;
  background-color: #ffec99;
  border-radius: 5px;
  padding: 10px;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
}
</pre>

<p>为了演示这个网格系统是如何工作的，我在包装器中包含了4个子元素。</p>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="item1"&gt;Start column line 1, span 3 column tracks.&lt;/div&gt;
  &lt;div class="item2"&gt;Start column line 6, span 4 column tracks. 2 row tracks.&lt;/div&gt;
  &lt;div class="item3"&gt;Start row 2 column line 2, span 2 column tracks.&lt;/div&gt;
  &lt;div class="item4"&gt;Start at column line 3, span to the end of the grid (-1).&lt;/div&gt;
&lt;/div&gt;
</pre>

<p>然后，我可以使用命名行和span关键字将它们放到网格上。</p>

<pre class="brush: css">.item1 {
  grid-column: col-start / span 3;
}
.item2 {
  grid-column: col-start 6 / span 4 ;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: col-start 2 / span 2;
  grid-row: 2;
}
.item4 {
  grid-column: col-start 3 / -1;
  grid-row: 3;
}
</pre>

<p>{{ EmbedLiveSample('layout_2', '800', '400') }}</p>
</div>

<p>正如命名行指南中所述，我们使用命名行来放置项目。因为我们有12行名称相同，所以我们使用名称，然后是行索引。如果您喜欢并完全避免使用命名行，也可以使用行索引本身。</p>

<p>我没有设置结束行号，而是选择使用span关键字表示这个元素应该跨多少个轨道。我喜欢这种方法，因为在使用多列布局系统时，我们通常根据网格的轨迹数量来考虑块，并根据不同的断点进行调整。要查看块如何与轨道对齐，请使用 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a>. 。它清楚地展示了我们的项目是如何放置的。</p>

<p><img alt="Showing the items placed on the grid with grid tracks highlighted." src="https://mdn.mozillademos.org/files/14753/11-grid-inspector-12col.png"></p>

<p>与您以前可能使用过的网格系统上的网格布局的工作方式有一些关键区别。如您所见，我们不需要添加任何标记来创建行，网格系统需要这样做来阻止元素弹出到上面的行中。使用CSS网格布局，我们可以将内容放入行中，如果行是空的，则它们不会上升到上面的行中。由于这种严格的列和行布局，我们也可以很容易地在布局中留出空白。我们也不需要特殊的类来拉或推东西，将它们缩进网格。我们需要做的就是指定项目的开始和结束行。</p>

<h3 id="使用12列系统构建布局">使用12列系统构建布局</h3>

<p>为了了解这种布局方法在实践中是如何工作的，我们可以使用12列网格系统创建与使用{{cssxref("grid-template-areas")}}创建的布局相同的布局。我开始使用与网格模板区域示例相同的标记。</p>

<div id="layout_3">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

    .wrapper {
        max-width: 1024px;
        margin: 0 auto;
        font: 1.2em Helvetica, arial, sans-serif;
    }

    .wrapper &gt; * {
        border: 2px solid #f08c00;
        background-color: #ffec99;
        border-radius: 5px;
        padding: 10px;
    }

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
        &lt;header class="main-head"&gt;The header&lt;/header&gt;
        &lt;nav class="main-nav"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Nav 3&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;article class="content"&gt;&lt;h1&gt;Main article area&lt;/h1&gt;
        &lt;p&gt;In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.&lt;/p&gt;&lt;/article&gt;
        &lt;aside class="side"&gt;Sidebar&lt;/aside&gt;
        &lt;div class="ad"&gt;Advertising&lt;/div&gt;
        &lt;footer class="main-footer"&gt;The footer&lt;/footer&gt;
    &lt;/div&gt;
</pre>

<p>然后，我可以设置网格，如上面的示例12列布局。</p>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-gap: 20px;
}
</pre>

<p>我们将再次使其成为响应式布局，不过这次使用的是命名行。每个断点都将使用一个12列的网格，但是，根据屏幕的大小，项目将跨越的轨道数量会发生变化。</p>

<p>我们首先启动移动设备，对于最窄的屏幕，我们想要的只是保持项目的源顺序，并且所有项目都跨越网格。</p>

<pre class="brush: css">.wrapper &gt; * {
  grid-column: col-start / span 12;
}
</pre>

<p>在下一个断点处，我们希望转移到两列布局。我们的标题和导航仍然跨整个网格，所以我们不需要为它们指定任何位置。侧边栏从第一行colstart开始，共3行。它在第3行之后，因为标题和导航位于前两行轨道中。</p>

<p>ad面板位于边栏下面，因此从网格行4开始。然后我们有内容和页脚，从colstart 4开始，跨越9个轨道，把它们带到网格的末端。</p>

<pre class="brush: css">@media (min-width: 500px) {

  .side {
    grid-column: col-start / span 3;
    grid-row: 3;
  }
  .ad {
    grid-column: col-start / span 3;
    grid-row: 4;
  }
  .content, .main-footer {
    grid-column: col-start 4 / span 9;
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}
</pre>

<p>最后，我们转到这个布局的三列版本。标题继续横跨整个网格，但现在导航将向下移动，成为第一个侧边栏，其中包含内容，然后是旁边的侧边栏。页脚现在也跨整个布局。</p>

<pre class="brush: css">@media (min-width: 700px) {
  .main-nav {
    grid-column: col-start / span 2;
    grid-row: 2 / 4;
  }
  .content {
    grid-column: col-start 3 / span 8;
    grid-row: 2 / 4;
  }
  .side {
    grid-column: col-start 11 / span 2;
    grid-row: 2;
  }
  .ad {
    grid-column: col-start 11 / span 2;
    grid-row: 3;
  }
  .main-footer {
    grid-column: col-start / span 12;
  }
  nav ul {
    flex-direction: column;
  }
}
</pre>

<p>{{ EmbedLiveSample('layout_3', '800', '450') }}</p>
</div>

<p>网格检查器再次帮助我们了解布局是如何形成的。</p>

<p><img alt="Showing the layout with grid tracks highlighted by the grid inspector." src="https://mdn.mozillademos.org/files/14755/11-grid-inspector-12col-layout.png" style="height: 614px; width: 2050px;"></p>

<p>在创建这个布局时需要注意的一点是，我们不需要在每个断点显式地定位网格上的每个元素。我们能够继承为早期断点设置的位置——这是移动优先”的优势。我们还可以利用网格自动布局。通过保持元素的逻辑顺序，自动布局为我们将项目放到网格上做了很多工作。在本指南的最后一个示例中，我们将创建完全依赖自动布局的布局。</p>

<h2 id="自动放置的产品列表">自动放置的产品列表</h2>

<p>许多布局基本上是一组“卡片”——产品列表、图像库等等。网格可以使创建这些清单变得非常容易，而且无需添加媒体查询就可以响应。在下一个例子中，我将CSS Grid和flexbox布局相结合，以创建一个简单的产品列表布局。</p>

<p>我的列表的标记是一个无序的项目列表。每个项目都包含一个标题、一些不同高度的文本和对action链接的调用。</p>

<div id="layout_4">
<pre class="brush: html">&lt;ul class="listing"&gt;
  &lt;li&gt;
    &lt;h2&gt;Item One&lt;/h2&gt;
    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
  &lt;/li&gt;
   &lt;li&gt;
     &lt;h2&gt;Item Two&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="wide"&gt;
     &lt;h2&gt;Item Three&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
     &lt;p&gt;Quite a lot more&lt;/p&gt;
     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;h2&gt;Item Four&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
     &lt;li&gt;
     &lt;h2&gt;Item Five&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>

<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
    img {max-width: 100%; display: block;}
    body {
        font: 1.2em Helvetica, arial, sans-serif;
    }
    a:link, a:visited {
      text-decoration: none;
      color: #f08c00;
    }

    h2 {
      background-color: #f08c00;
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 20px;
    }
</pre>
</div>

<p>我们将创建一个具有灵活数量的灵活列的网格。我希望它们永远不要小于200像素，然后平等地共享任何可用的剩余空间——所以我们总是得到相同宽度的列轨迹。我们使用minmax()函数实现了这一点，该函数是用于轨道大小的重复表示法。</p>

<pre class="brush: css">.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
</pre>

<p>一旦我添加了这个CSS，项目就开始以网格的形式展开。如果我让窗口变小或变宽，列跟踪的数量就会发生变化，而不需要使用媒体查询添加断点并重新定义网格。</p>

<p>然后，我就可以使用flex touch来整理这些盒子的内部结构。 我将列表项设置为<code> display: flex </code>和 <code>flex-direction</code> 设置为 <code>column</code>。 然后，我可以在<code> .cta </code>上使用自动边界将这个工具条推到盒子底部。</p>

<pre class="brush: css">.listing li {
  border: 1px solid #ffe066;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.listing .cta {
  margin-top: auto;
  border-top: 1px solid #ffe066;
  padding: 10px;
  text-align: center;
}
.listing .body {
  padding: 10px;
}
</pre>

<p>这是我使用flexbox而不是grid的一个关键原因，如果我只是在一个维度上调整或发布一些东西，那就是一个flexbox用例。</p>

<p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p>
</div>

<p>这一切现在看起来相当完整，然而我们有时拥有这些卡片，其中包含的内容比其他卡片多得多。让它们跨越两条轨道可能很好，这样它们就不会那么高了。我在较大的项目上有一个wide类，我添加了一个规则{{cssxref("grid-column-end")}}，其值为span 2。现在，当grid遇到这个项目时，它将为它分配两个轨道。在某些断点处，这意味着我们将在网格中得到一个缺口——在这个缺口中没有空间放置一个双轨项目。</p>

<p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p>

<p>我可以通过设置{{cssxref("grid-auto-flow")}}<code>: dense </code>在网格容器上设置稠密，从而使网格填充这些空白。但是，在这样做时要小心，因为它会使项目偏离其逻辑源顺序。您应该只在项目没有设置顺序时才这样做——并且要注意源文件后面的选项卡顺序的问题，而不是重新排序的显示。</p>

<div id="layout_5">
<div class="hidden">
<pre class="brush: html">&lt;ul class="listing"&gt;
  &lt;li&gt;
    &lt;h2&gt;Item One&lt;/h2&gt;
    &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
  &lt;/li&gt;
   &lt;li&gt;
     &lt;h2&gt;Item Two&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="wide"&gt;
     &lt;h2&gt;Item Three&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;
     &lt;p&gt;This one has more text than the other items.&lt;/p&gt;
     &lt;p&gt;Quite a lot more&lt;/p&gt;
     &lt;p&gt;Perhaps we could do something different with it?&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;h2&gt;Item Four&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
     &lt;li&gt;
     &lt;h2&gt;Item Five&lt;/h2&gt;
     &lt;div class="body"&gt;&lt;p&gt;The content of this listing item goes here.&lt;/p&gt;&lt;/div&gt;
      &lt;div class="cta"&gt;&lt;a href=""&gt;Call to action!&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>

<pre class="brush: css">* {box-sizing: border-box;}
    img {max-width: 100%; display: block;}
    body {
        font: 1.2em Helvetica, arial, sans-serif;
    }
    a:link, a:visited {
      text-decoration: none;
      color: #f08c00;
    }

    h2 {
      background-color: #f08c00;
      color: #fff;
      text-align: center;
      margin: 0;
      padding: 20px;
    }

.listing li {
  border: 1px solid #ffe066;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.listing .cta {
  margin-top: auto;
  border-top: 1px solid #ffe066;
  padding: 10px;
  text-align: center;
}
.listing .body {
  padding: 10px;
}
</pre>
</div>

<pre class="brush: css">.listing {
  list-style: none;
  margin: 2em;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.listing .wide {
  grid-column-end: span 2;
}
</pre>

<p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p>

<p>这种技术使用auto-placement一些规则应用于某些物品是非常有用的,并且可以帮助你处理的内容是由CMS例如,输出有重复项,或许可以添加一个类特定的呈现为HTML。</p>
</div>

<h2 id="Further_exploration">Further exploration</h2>

<p>学习使用网格布局的最佳方法是继续构建我们在这里介绍的示例。选择一些您通常使用选择的框架构建的东西，或者使用浮动构建的东西，看看是否可以使用grid构建它。不要忘记寻找用当前方法无法构建的示例。这可能意味着从杂志或其他非网络资源中获取灵感。网格布局提供了我们以前没有过的可能性，我们不需要绑定到相同的旧布局来使用它。</p>

<ul>
 <li>有关灵感，请参阅 <a href="http://labs.jensimmons.com/">Layout Labs from Jen Simmons</a>, 她一直在创建基于一系列资源的布局。</li>
 <li>有关其他常见布局模式，请参见 <a href="http://gridbyexample.com">Grid by Example</a>, 这里有许多网格布局的小例子，也有一些较大的UI模式和完整的页面布局。</li>
</ul>

<section class="Quick_links" id="Quick_Links">
<ol>
 <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
 <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
  <ol>
   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
  </ol>
 </li>
</ol>
</section>