1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
|
---
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 > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</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 > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div class="item">Item</div>
</div>
</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 > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
</pre>
</div>
<pre class="brush: html"><div class="wrapper">
<div class="item">Item</div>
</div>
</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>
|
