---
title: Grid Lines
slug: Glossary/Grid_Lines
tags:
  - CSS Grids
translation_of: Glossary/Grid_Lines
---
<p>使用<a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid布局</a>在显式网格中定义{{glossary("Grid tracks", "轨道")}}的同时会创建<strong>网格线</strong>。在下面的例子中,有一个三列两行的网格。它给了我们4条列线和3条行线。</p>

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

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&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>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
</pre>

<p>{{ EmbedLiveSample('example_1', '500', '250') }}</p>

<p>网格线可以用它们的编号来寻址。在从左到右的语言比如英语中,列线1将位于网格的左侧,行线1将位于其顶部。线编号遵循文档的<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">写入模式</a>,因此在从右到左的语言中,列线1行将位于网格的右侧。下面的图片展示了该网格的线编号,假设语言是从左到右的。</p>

<p><img alt="Diagram showing the grid with lines numbered." src="https://mdn.mozillademos.org/files/14763/1_diagram_numbered_grid_lines.png" style="height: 456px; width: 764px;"></p>
</div>

<p>当创建隐式轨道去支持显式网格外的内容时,网格线也会在隐式网格中被创建,但是这些网格线不能通过编号来寻址。</p>

<h2 id="按网格线编号将项目放置到网格上">按网格线编号将项目放置到网格上</h2>

<p>创建一个网格后,可以通过网格线编号将项目放置到该网格上。在下面的例子中,项目定位从列线1到列线3,从行线1到行线3。</p>

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

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
</pre>

<p>{{ EmbedLiveSample('example_2', '500', '250') }}</p>
</div>

<h2 id="命名网格线">命名网格线</h2>

<p>在显式网格中创建的网格线可以被命名,在轨道大小信息之前或之后的方括号中命名。当放置一个项目时,你可以使用这些名称代替编号,如下所示。</p>

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

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 100px);
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: html">&lt;div class="wrapper"&gt;
   &lt;div class="item"&gt;Item&lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}
</pre>

<p>{{ EmbedLiveSample('example_3', '500', '250') }}</p>
</div>

<h2 id="了解更多">了解更多</h2>

<h3 id="属性参考">属性参考</h3>

<ul>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-column-start")}}</li>
 <li>{{cssxref("grid-column-end")}}</li>
 <li>{{cssxref("grid-column")}}</li>
 <li>{{cssxref("grid-row-start")}}</li>
 <li>{{cssxref("grid-row-end")}}</li>
 <li>{{cssxref("grid-row")}}</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>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
 <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></em></li>
 <li>CSS Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids, Logical Values and Writing Modes</a></em></li>
 <li><a href="https://drafts.csswg.org/css-grid/#grid-line-concept">Definition of Grid Lines in the CSS Grid Layout specification</a></li>
</ul>