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
|
---
title: grid-column
slug: Web/CSS/grid-column
translation_of: Web/CSS/grid-column
---
<p><code>grid-column</code> CSS属性是 {{cssxref("grid-column-start")}} 和 {{cssxref("grid-column-end")}} 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 {{glossary("grid area","grid area","网格区域")}}。</p>
<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
<h2 id="语法">语法</h2>
<p>如果给出两个<code><grid-line></code>值，它们之间用“ /”分隔。 将<code>grid-column-start</code>的正手设置为斜线之前的值，并将<code>grid-column-end</code>的正手设置为斜线之后的值。</p>
<p>每个<code><grid-line></code>值可以指定为：</p>
<ul>
<li>要么是<code>auto</code>关键字</li>
<li>或<code><custom-ident></code>值</li>
<li>或<code><integer></code>值</li>
<li>或者<code><custom-ident></code>和<code><integer></code>，两者之间用空格分隔</li>
<li>或关键字span与<code><custom-ident></code>或<code><integer></code>或两者一起使用。</li>
</ul>
<h3 id="值">值</h3>
<p><br>
<code>auto</code></p>
<p><br>
是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为1。</p>
<p><br>
<code><custom-ident></code></p>
<p><br>
如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。</p>
<div class="blockIndicator warning">
<p>注意：命名网格区域会自动生成这种形式的隐式命名行，因此请指定<code>grid-column: foo;</code>将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为<code>foo-start / foo-end</code>的行）。</p>
</div>
<p>否则，将其视为与<code><custom-ident></code>一起指定了整数1。</p>
<p><br>
<code><integer> && <custom-ident>?</code></p>
<p><br>
将第n条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。</p>
<p>如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。</p>
<p>{{cssxref("integer")}}的值为<code>0</code>无效。</p>
<p><code>span && [ <integer> || <custom-ident> ]</code><br>
将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘n行。<br>
如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。</p>
<p>如果省略<integer>，则默认为<code>1</code>。负整数或0无效。</p>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html notranslate"><div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div></pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css; highlight[14,19] notranslate">#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 2 / 4;
}
#item3 {
background-color: blue;
grid-column: span 2 / 7;
}
</pre>
<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p>
<h2 id="IE问题">IE问题</h2>
<p>IE11不支持自动放置网格项目。 除非用-ms-{{cssxref("grid-column")}}和-ms-{{cssxref("grid-row")}}显式注释，否则所有项目都以网格的第一行/列结尾。 可以使用一些JavaScript来启用自动注释：源存储库。</p>
<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("CSS3 Grid", "#propdef-grid-column", "grid-column")}}</td>
<td>{{Spec2("CSS3 Grid")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.grid-column")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
<li>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>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li>
</ul>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li data-default-state="open"><a href="#"><strong>Guides</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</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 grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, 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 Layout and Progressive Enhancement</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Properties</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
<ol>
<li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
<li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
<li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
<li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
<li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
<li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
<li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
</ol>
</li>
</ol>
</section>
|
