CSS grid-column 语法
在 CSS 中，grid-column 属性是一个复合（简写）属性，它用于同时设置 grid-column-start 和 grid-column-end 这两个属性。
语法：
grid-column: start;
grid-column: start / end;说明：
grid-column 属性可以接受 1 个值或 2 个值，值与值之间使用 “/” 隔开。start 代表的是 grid-column-start 的取值，end 代表的是 grid-column-end 的取值。
如果 grid-column 是单个值，该值被解释为 grid-column-start 的值，然后 grid-column-end 使用默认值 auto。比如 grid-column: 2; 等价于：
grid-column-start: 2;
grid-column-end: auto;如果 grid-column 是两个值，此时第一个值会被解释为 grid-column-start 的值，而第二个值会被解释为 grid-column-end 的值。然后这两个值可以是：
<integer>：一个整数值，表示网格线的序号（正数从起始边缘计数，负数从结束边缘计数）。<name>：如果在 grid-template-rows 或 grid-template 中定义了具名网格线，可以使用这些名称。span <integer>：表示子项从其起始点开始，向右跨越指定数量的列轨道。span <name>：表示子项从其起始点开始，跨越到指定具名网格线。
比如，grid-column: 1 / 3; 等价于：
grid-column-start: 1;
grid-column-end: 3;再比如，grid-column: 2 / span 2; 等价于：
grid-column-start: 2;
grid-column-end: span 2;对于 grid-column 属性，小伙伴们要清楚以下几点。
- grid-column 是 grid-area 简写属性的组成部分之一。如果你已经使用了 grid-template-areas，通常会直接用 grid-area: <name>; 来放置子项，这更具可读性。然而，当需要精确控制子项在特定列线之间的位置或跨度时，grid-column 仍然非常有用。
- 使用 grid-column 属性时，它会重置 grid-column-start 和 grid-column-end 的值。
注意: grid-column 属性只能用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-column 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto / auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-column 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-column 属性是如何使用的。
示例 1：grid-column 取值是 1 个值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
/* 定义 4 列 2 行的网格 */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
width: 400px;
height: 200px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
color: white;
}
.item-1 {
grid-column: 1; /* 从第 1 列线开始 */
}
.item-2 {
grid-column: 3; /* 从第 3 列线开始 */
}
.item-3 {
grid-column: 4; /* 从第 4 列线开始 */
}
.item-4 {
grid-column: 2; /* 从第 1 列线开始 */
}
.item-5 {
grid-column: 3; /* 从第 3 列线开始 */
}
.item-6 {
grid-column: 4; /* 从第 4 列线开始 */
}
</style>
</head>
<body>
<div class="container">
<div class="item-1">item 1</div>
<div class="item-2">item 2</div>
<div class="item-3">item 3</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
<div class="item-6">item 6</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当 grid-column 取值是一个值时，该值会作为 grid-column-start 的值。在上面例子中，我们定义了一个 4 列 2 行的网格容器，因此有 5 条垂直网格线（1, 2, 3, 4, 5）。
对于 item-1 来说，grid-column: 1; 表示将其放置在第 1 列。对于 item-2 来说，grid-column: 3; 表示将其放置在第 3 列……以此类推。
示例 2：grid-column 取值是 2 个值
<!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;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
.item-1 {
grid-column: 1 / 3; /* 从第 1 列线开始，到第 3 列线结束（跨越 2 列） */
}
.item-2 {
grid-column: 2 / 5; /* 从第 2 列线开始，到第 5 列线结束（跨越 3 列） */
}
.item-3 {
grid-row: 3; /* 放置在第三行 */
grid-column: 1 / -1; /* 从第 1 列线开始，到倒数第 1 条列线结束（跨越所有列） */
}
/* item-4、item-5 将自动放置 */
</style>
</head>
<body>
<div class="container">
<div class="item item-1">item 1（1 / 3）</div>
<div class="item item-2">item 2（2 / 5）</div>
<div class="item item-3">item 3（1 / -1）</div>
<div class="item item-4">item 4</div>
<div class="item item-5">item 5</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
当 grid-column 取值是 2 个值时，表示同时设置 grid-column-start 和 grid-column-end 的值。
- 对于 item-1 来说，grid-column: 1 / 3; 表示将其放置在第 1 列和第 2 列。
- 对于 item-2 来说，grid-column: 2 / 5; 表示将其放置在第 2、第 3 和第 4 列。
- 对于 item-3 来说，grid-column: 1 / -1; 表示将其放置在第 1 列到最后一列的所有列。
示例 3：grid-column 使用 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: 1 / span 2; /* 从第 1 列线开始，向右跨越 2 列 */
}
.item-2 {
grid-row: 2; /* 放置在第二行 */
grid-column: 2 / span 3; /* 从第 2 列线开始，向右跨越 3 列 */
}
.item-3 {
grid-row: 3; /* 放置在第三行 */
grid-column: 1 / 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: 1 / span 2; 表示其从第 1 列线开始，向右跨越 2 列。
- 对于 item-2 来说，grid-column: 2 / span 3; 表示其从第 2 列线开始，向右跨越 3 列。
- 对于 item-3 来说，grid-column: 1 / span 4; 表示其从第 1 列线开始，向右跨越 4 列，占据了整个网格宽度。
