CSS grid-column-end 语法
在 CSS 中，grid-column-end 属性用于指定网格子项在列方向上的结束位置。它定义了网格子项结束于哪一条垂直的网格线。
语法：
grid-column-end: 取值;说明：
grid-column-start 的取值可以是以下几种情况。
auto（默认值）：表示自动放置。如果未指定 grid-column-start，则根据自动布局算法决定结束位置；如果指定了 grid-column-start，则默认跨越 1 个轨道。整数值：表示网格线的序号。- 正整数：从网格的起始边缘（通常是左侧）开始计数。例如，3 表示第三条垂直网格线，表示子项将在第二列结束后结束。
- 负整数：从网格的结束边缘（通常是右侧）开始计数。例如，-1 表示最后一条垂直网格线。
name：如果你在 grid-template-columns 或 grid-template 中定义了具名网格线，可以使用这些名称来指定结束线。例如，grid-column-end: main-end;。span <integer>：表示网格子项从其起始位置开始，向右跨越指定数量的列轨道。span <name>：表示网格子项从其起始位置开始，跨越到指定具名网格线。
对于 grid-column-end 属性，小伙伴们要清楚以下几点。
- grid-column-end 通常与 grid-column-start 属性结合使用，共同确定子项所占据的列区域。
- 当只设置 grid-column-end 而不设置 grid-column-start 时，子项会根据其 grid-auto-flow 和其他子项自动放置，然后从自动确定的起始位置延伸到 grid-column-end 指定的结束线。
- 当 grid-column-end 值小于或等于 grid-column-start 值时，Grid 规范会自动将其调整到合适的位置（通常是 grid-column-start 值加上网格列数）。
注意: grid-column-end 属性只能应用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-column-end 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-column-end 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-column-end 属性是如何使用的。
示例 1：grid-column-end 使用数字定义结束列线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 4 列 4 行的网格 */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
width: 400px;
height: 400px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-column-start: 1;
grid-column-end: 3; /* 从第 1 列线开始，到第 3 列线结束（占据 2 列） */
}
.item-2 {
grid-column-start: 2;
grid-column-end: 5; /* 从第 2 列线开始，到第 5 列线结束（占据 3 列） */
}
.item-3 {
grid-column-start: 1;
grid-row-start: 2; /* 定位到第二行 */
grid-column-end: -1; /* 从第 1 列线开始，到倒数第 1 条列线结束（占据所有列） */
}
/* item-4、item-5 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1（跨 2 列）</div>
<div class="item-2">item 2（跨 3 列）</div>
<div class="item-3">item 3（跨所有列）</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 4 行的网格容器，因此有 5 条垂直网格线（1, 2, 3, 4, 5）。
- 对于 item-1 来说，grid-column-start: 1; grid-column-end: 3; 表示子项从第 1 列线开始，到第 3 列线结束，因此占据了第 1 和第 2 列。
- 对于 item-2 来说，grid-column-start: 2; grid-column-end: 5; 表示子项从第 2 列线开始，到第 5 列线结束，因此占据了第 2、第 3 和第 4 列。
- 对于 item-3 来说，grid-column-start: 1; grid-column-end: -1; 表示子项从第 1 列线开始，到倒数第 1 条网格线（即第 5 条线）结束，从而占据了所有 4 列。
示例 2：grid-column-end 使用 span 关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 4 列 3 行的网格 */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 400px;
height: 300px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-column-start: 1;
grid-column-end: span 2; /* 从第 1 列线开始，向右跨越 2 列 */
}
.item-2 {
grid-row-start: 2; /* 定位到第二行 */
grid-column-start: 2;
grid-column-end: span 3; /* 从第 2 列线开始，向右跨越 3 列 */
}
.item-3 {
grid-row-start: 3; /* 定位到第三行 */
grid-column-start: 1;
grid-column-end: span 4; /* 从第 1 列线开始，向右跨越 4 列 */
}
/* item-4、item-5 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1 (span 2)</div>
<div class="item-2">item 2 (span 3)</div>
<div class="item-3">item 3 (span 4)</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5 </div>
</div>
</body>
</html>页面效果如下图所示。
分析：
使用 span 关键字使得子项尺寸的定义更加直观和易于理解，尤其是在需要跨越多个轨道时。
- 对于 item-1 来说，grid-column-end: span 2; 表示它将从其起始列线向右跨越 2 个列轨道。
- 对于 item-2 来说，grid-column-end: span 3; 表示它将从其起始列线向右跨越 3 个列轨道。
- 对于 item-3 来说，grid-column-end: span 4; 表示它将从其起始列线向右跨越 4 个列轨道，占据了整个网格的宽度。
