格列端 | grid-column-end (Grid Layout) - CSS 中文开发手册
grid-column-end通过贡献一条线，一个跨度，或全无（自动）将其放置网格，从而指定其的块尾端指定网格列内的网格项的结束位置网格区域。
/* Keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegridarea span; /* Global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset;
| 初始值 | auto |
|---|---|
| 规范顺序 | grid items and absolutely-positioned boxes whose containing block is a grid container |
| 是否继承 | no |
| 适用媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 规范顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
取值
auto是一个关键字，指示该属性对网格项目的放置没有任何贡献，表示自动放置，自动跨度或默认跨度1。<custom-ident>如果有一个名为“<custom-ident> -end”的命名行，它会将第一个这样的行放到网格项目的放置位置。
注意：命名的网格区域会自动生成此表单的隐式命名行，因此指定grid-column-end: foo;将选择该命名的网格区域的结束边缘（除非foo-end在其之前明确指定了另一个命名行）。
否则，这被视为整数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-end: span 2;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
} 规范
| Specification | Status | Comment |
|---|---|---|
| CSS Grid LayoutThe definition of 'grid-column-end' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 57.01 | 52.0 (52.0)2 | 10.0-ms3 | 20-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 | 52.0 (52.0)2 | 10.0-ms3 | 44 | No support |