格列开始 | grid-column-start
grid-column-start通过贡献线，跨度，或没有（自动）将其放置格指定网格列内的网格项目的起始位置。该起始位置定义了网格区域的块起始边缘。
/* Keyword value */
grid-column-start: auto;
/* <custom-ident> value */
grid-column-start: somegridarea;
/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: somegridarea 4;
/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: 5 somegridarea span;
/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: unset;初始值 | 汽车 |
|---|---|
适用于 | 网格项目和绝对定位的框，其包含块是网格容器 |
遗传 | 没有 |
媒体 | 视觉 |
计算值 | 作为指定 |
动画类型 | 离散的 |
规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
该属性被指定为单个<grid-line>值。甲<grid-line>值可以被指定为：
- 要么
auto关键词
- 或者是
<custom-ident>价值
- 或者
<integer>
- 或者两者兼而有之
<custom-ident>和<integer>，被一个空格隔开
- 或者关键字
span连同一个<custom-ident>或者<integer>或者两者兼而有之。
取值
auto一个关键字，指示该属性对网格项目的放置没有任何贡献，表示自动放置，自动跨度或默认跨度1。
<custom-ident>如果有一个名为“<custom-ident> -start”的命名行，它会将第一个这样的行添加到网格项的位置。
注意：命名的网格区域会自动生成此表单的隐式命名行，因此指定grid-column-start: foo;将选择该命名的网格区域的起始边缘（除非foo-start在其之前明确指定了另一个命名行）。
否则，这被视为整数1已被指定为一起<custom-ident>。
<integer> && <custom-ident>?向网格项的位置贡献第n行网格。如果给出一个负整数，则从显式网格的结束边缘开始反向计数。
如果名称被指定为<custom-ident>，只有具有该名称的行才会被计算在内。如果没有足够的名称行存在，则假定所有隐式网格行都具有该名称，以便找到该位置。
一个<integer>值0是无效的。
span && [ <integer> || <custom-ident> ]为网格项的放置提供网格跨度，这样网格项的网格区域的列起始边缘是从结束边缘开始的n行。
如果名称被指定为<custom-ident>，只有具有该名称的行才会被计算在内。如果没有足够的名称行存在，则在与搜索方向对应的显式网格一侧的所有隐式网格线都假定具有该名称，以便计算此跨度。
如果<Integer>省略，则默认为1。负整数或0是无效的。
<custom-ident>不能为span
形式语法
<grid-line>where
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]例
HTML内容
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>CSS内容
#grid {
display: grid;
height: 100px;
grid-template: repeat(4, 1fr) / 100px;
}
#item1 {
background-color: lime;
grid-column-start: span 2;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}规范
Specification | Status | Comment |
|---|---|---|
CSS Grid LayoutThe definition of 'grid-column-start' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 57.01 | 20 (12.10240)-ms3 | 52.0 (52.0)2 | 10.0-ms3 | 444 | No support5 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
Basic support | 57.01 | 57.01 | No support | 10.0-ms3 | 44 | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
