path: root/files/zh-cn/web/css/css_grid_layout/index.html

---
title: 网格布局
slug: Web/CSS/CSS_Grid_Layout
tags:
  - CSS
  - CSS Grid Layout
  - Grid Layout
  - Grid 布局
  - Grids
  - Layout
  - css layout
  - 参考
  - 布局
  - 总览
translation_of: Web/CSS/CSS_Grid_Layout
---
<p><strong>CSS 网格布局</strong>擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。</p>

<p>像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。</p>

<h2 id="Basic_Example" name="Basic_Example">基本示例</h2>

<p>以下示例显示了一个三列轨道的网格，其中创建的行最小为100像素，最大为自动。条目使用线性定位放置在网格上。</p>

<div id="example">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper &gt; div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}</pre>
</div>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="wrapper"&gt;
  &lt;div class="one"&gt;One&lt;/div&gt;
  &lt;div class="two"&gt;Two&lt;/div&gt;
  &lt;div class="three"&gt;Three&lt;/div&gt;
  &lt;div class="four"&gt;Four&lt;/div&gt;
  &lt;div class="five"&gt;Five&lt;/div&gt;
  &lt;div class="six"&gt;Six&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</pre>

<p>{{ EmbedLiveSample('example', '500', '440') }}</p>
</div>

<h2 id="参考">参考</h2>

<h3 id="CSS属性">CSS属性</h3>

<div class="index">
<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-template-areas")}}</li>
 <li>{{cssxref("grid-template")}}</li>
 <li>{{cssxref("grid-auto-columns")}}</li>
 <li>{{cssxref("grid-auto-rows")}}</li>
 <li>{{cssxref("grid-auto-flow")}}</li>
 <li>{{cssxref("grid")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-row")}}</li>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-area")}}</li>
 <li>{{cssxref("grid-row-gap")}}</li>
 <li>{{cssxref("grid-column-gap")}}</li>
 <li>{{cssxref("grid-gap")}}</li>
</ul>
</div>

<h3 id="CSS函数">CSS函数</h3>

<div class="index">
<ul>
 <li>{{cssxref("repeat", "repeat()")}}</li>
 <li>{{cssxref("minmax", "minmax()")}}</li>
 <li>{{cssxref("fit-content", "fit-content()")}}</li>
</ul>
</div>

<h3 id="CSS_数据类型">CSS 数据类型</h3>

<div class="index">
<ul>
 <li>{{cssxref("&lt;flex&gt;")}}</li>
</ul>
</div>

<h3 id="术语表">术语表</h3>

<div class="index">
<ul>
 <li><a href="/zh-CN/docs/Glossary/Grid">网格（Grid）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_lines">网格线（Grid lines）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_tracks">网格轨道（Grid tracks）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_cell">网格单元格（Grid cell）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_areas">网格区域（Grid areas）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Gutters">网格间隙（Gutters）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_Axis">网格轴（Grid Axis）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_rows">网格行（Grid row）</a></li>
 <li><a href="/zh-CN/docs/Glossary/Grid_column">网格列（Grid column）</a></li>
</ul>
</div>

<h2 id="指南">指南</h2>

<div class="index">
<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship of Grid Layout to other layout methods</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/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 CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in CSS Grid Layout</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grid, 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 and progressive enhancement</a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">Realising common layouts using CSS Grid</a></li>
</ul>
</div>

<h2 id="外部资源">外部资源</h2>

<ul>
 <li><a href="http://labs.jensimmons.com/">Examples from Jen Simmons</a></li>
 <li><a href="http://gridbyexample.com/">Grid by Example - a collection of usage examples and video tutorials</a></li>
 <li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops Grid Reference</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox DevTools CSS Grid Inspector</a></li>
 <li><a href="https://mozilladevelopers.github.io/playground/">CSS Grid Playground</a></li>
 <li><a href="http://cssgridgarden.com/">Grid Garden</a> - 一个学习CSS 网格的游戏</li>
 <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">https://css-tricks.com/snippets/css/complete-guide-grid/</a></li>
 <li><a href="https://css-tricks.com/snippets/css/css-grid-starter-layouts/">https://css-tricks.com/snippets/css/css-grid-starter-layouts/</a></li>
 <li><a href="https://css-tricks.com/getting-started-css-grid/">https://css-tricks.com/getting-started-css-grid/</a></li>
</ul>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName("CSS Grid 2") }}</td>
   <td>{{ Spec2("CSS Grid 2") }}</td>
   <td>增加<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Grid') }}</td>
   <td>{{ Spec2('CSS3 Grid') }}</td>
   <td>初始版本</td>
  </tr>
 </tbody>
</table>

<section id="Quick_links">
<ol>
 <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS网格布局</a></li>
 <li data-default-state="open"><a href="#"><strong>指南</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">网格布局的基本概念</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">与其他布局方法的关系</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基于线的定位</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">网格模板区域</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用命名线布局</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">网格布局中的自动定位</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">网格布局中的盒模型对齐</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">网格、逻辑值和书写模式</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS网格布局和可及性</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS网格布局和渐进增强</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用网格实现常见布局</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>属性</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>术语表</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Glossary/Grid">网格（Grid）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_lines">网格线（Grid lines）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_tracks">网格轨道（Grid tracks）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_cell">网格单元格（Grid cell）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_areas">网格区域（Grid areas）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Gutters">网格间隙（Gutters）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_Axis">网格轴（Grid Axis）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_rows">网格行（Grid row）</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_column">网格列（Grid column）</a></li>
  </ol>
 </li>
</ol>
</section>