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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
|
---
title: CSS格線布局
slug: Web/CSS/CSS_Grid_Layout
tags:
- CSS
- 參考
- 布局
- 柵格
- 示列
- 網格布局
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 像素，最大為 auto。Items 已經使用基於線放置在網格的位置上。</p>
<div id="example">
<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > 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"><div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div></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("<flex>")}}</li>
</ul>
</div>
<h3 id="詞匯表條目">詞匯表條目</h3>
<div class="index">
<ul>
<li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Lines">網格線</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Tracks">格線軌道</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Cell">格線單元</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Areas">格線區域</a></li>
<li><a href="/zh-TW/docs/Glossary/Gutters">間距</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Axis">格線軸</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Rows">格線行</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Column">格線列</a></li>
</ul>
</div>
<h2 id="指引">指引</h2>
<div class="index">
<ul>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局的基本概念</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">格線布局與其它布局的關係</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的格線命名排版</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定的網格線排版</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">在 CSS 自動放置格線布局</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">用 Box 對齊 CSS 格線布局</a></li>
<li><br>
<a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS 格線、邏輯值和寫作模式</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局與無障礙</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線與漸進增強</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">用 CSS 格線實做常見排版</a></li>
</ul>
</div>
<h2 id="外部資源">外部資源</h2>
<ul>
<li><a href="http://labs.jensimmons.com/">Jen Simmons 的示範</a></li>
<li><a href="http://gridbyexample.com/">格線示例：一些影片教學與使用範例</a></li>
<li><a href="https://tympanus.net/codrops/css_reference/grid/">Codrops 格線參考</a></li>
<li><a href="/zh-TW/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>
</ul>
<h2 id="規範">規範</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">格式</th>
<th scope="col">狀態</th>
<th scope="col">意見</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Grid') }}</td>
<td>{{ Spec2('CSS3 Grid') }}</td>
<td>初始定義</td>
</tr>
</tbody>
</table>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout">CSS 格線布局</a></li>
<li data-default-state="open"><a href="#"><strong>參考</strong></a>
<ol>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">格線布局基本概念</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">與其他布局的關系</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基於行展示的位置</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">格線模板區域</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用指定網格線布局</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">自動放置格線布局</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">格線布局中的框對齊</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">格線，邏輯值和寫入模式</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS 格線布局和輔助功能</a></li>
<li><a href="/zh-TW/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 格線布局與漸進式增強</a></li>
<li><a href="/zh-TW/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>Properties</strong></a>
<ol>
<li><a href="/zh-TW/docs/Web/CSS/grid-area">網格</a> </li>
<li><a href="/zh-TW/docs/Web/CSS/grid-area">網格區域</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-auto-columns">網格自動列</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-auto-flow">網格自動流</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-auto-rows">網格自動行</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-column">網格列</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-column-end">結束網格列</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-column-gap">網格柱間隙</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-column-start">啟動網格</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-gap">網格間隙</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-row">網格行</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-row-end">結束網格行</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-row-gap">網格行間隙</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-row-start">啟動網格行</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-template">網格模板</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-template-areas">網格模板區域</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-template-columns">網格模板的列</a></li>
<li><a href="/zh-TW/docs/Web/CSS/grid-template-rows">網格模板的行</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>詞匯表</strong></a>
<ol>
<li><a href="/zh-TW/docs/Glossary/Grid">格線</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_lines">網格線</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_tracks">網格軌道</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_cell">網格單元格</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_areas">網格區域</a></li>
<li><a href="/zh-TW/docs/Glossary/Gutters">间距</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_Axis">網格軸</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_rows">網格行</a></li>
<li><a href="/zh-TW/docs/Glossary/Grid_column">網格列</a></li>
</ol>
</li>
</ol>
</section>
|
