initial commit

1 files changed, 72 insertions, 0 deletions

diff --git a/files/zh-cn/glossary/gutters/index.html b/files/zh-cn/glossary/gutters/index.html
new file mode 100644
index 0000000000..935e0e6b2c
--- /dev/null
+++ b/files/zh-cn/glossary/gutters/index.html
@@ -0,0 +1,72 @@
+---
+title: Gutters
+slug: Glossary/Gutters
+tags:
+  - CSS Grids
+translation_of: Glossary/Gutters
+---
+<p><strong>网格间距</strong>是网格轨道之间的间距，可以通过 {{cssxref("grid-column-gap")}}，{{cssxref("grid-row-gap")}} 或者 {{cssxref("grid-gap")}} 在<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid布局</a>中创建。</p>
+
+<p>在下面的例子中，由一个三列两行的网格。它的列轨道之间有20px的间距，行轨道之间有20px的间距。</p>
+
+<div id="example_1">
+<div class="hidden">
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
+
+.wrapper {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+}
+
+.wrapper &gt; div {
+    border: 2px solid #ffa94d;
+    border-radius: 5px;
+    background-color: #fff8f8;
+    padding: 1em;
+    color: #d9480f;
+}
+</pre>
+</div>
+
+<pre class="brush: css notranslate">.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1.2fr);
+  grid-auto-rows: 45%;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+</pre>
+
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
+   &lt;div&gt;One&lt;/div&gt;
+   &lt;div&gt;Two&lt;/div&gt;
+   &lt;div&gt;Three&lt;/div&gt;
+   &lt;div&gt;Four&lt;/div&gt;
+   &lt;div&gt;Five&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>{{ EmbedLiveSample('example_1', '300', '280') }}</p>
+</div>
+
+<p>在网格大小上，网格间距参与计算就好像规则的网格轨道一样，但是没有任何东西可以被放置到网格间距上。网格间距也像网格线一样在那个位置会增加额外的大小，因此网格项目会被放置在网格间距末的那条网格线后。</p>
+
+<p>能够导致轨道被间隔开来的，除了网格间距属性，还有margins，padding或者使用<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">盒模型对齐</a>中的空间分布属性。这些方法都会导致可见间距的产生，因此网格间距属性不等价于”间距大小“，除非你没有使用这些能够产生间距的方法。</p>
+
+<h2 id="了解更多">了解更多</h2>
+
+<h3 id="属性参考">属性参考</h3>
+
+<ul>
+ <li>{{cssxref("grid-column-gap")}}</li>
+ <li>{{cssxref("grid-row-gap")}}</li>
+ <li>{{cssxref("grid-gap")}}</li>
+</ul>
+
+<h3 id="扩展阅读">扩展阅读</h3>
+
+<ul>
+ <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li>
+ <li><a href="https://drafts.csswg.org/css-grid/#gutters">Definition of gutters in the CSS Grid Layout specification</a></li>
+</ul>