CSS grid-column-start 语法
在 CSS 中，grid-column-start 属性用于定义网格子项在列方向上的起始位置。它定义了网格子项开始于哪一条垂直的网格线。
语法：
grid-column-start: 取值;说明：
grid-column-start 的取值可以是以下几种情况。
auto（默认值）：表示自动放置。如果未指定 grid-column-end，或者 end 也是 auto，则根据 grid-auto-flow 规则自动排列。整数值：表示网格线的序号。- 正整数：从网格的起始边缘（通常是左侧）开始计数。例如，1 表示第一条垂直网格线，2 表示第二条垂直网格线。
- 负整数：从网格的结束边缘（通常是右侧）开始计数。例如，-1 表示最后一条垂直网格线。
name：如果你在 grid-template-columns 或 grid-template 中定义了具名网格线，可以使用这些名称来指定起始线。例如，grid-column-start: main-start;。span <integer>：表示网格子项从其自动放置的位置开始，向左（或向上，取决于 grid-auto-flow）跨越指定数量的列轨道。span <name>：表示网格子项从其自动放置的位置开始，跨越到指定具名网格线之前。
对于 grid-column-start 属性，小伙伴们要清楚以下几点。
- grid-column-start 通常与 grid-column-end 属性结合使用，共同确定子项所占据的列区域。
- 当只设置 grid-column-start 而不设置 grid-column-end 时，子项默认只占据一个列轨道，除非其内容需要更多空间（如果列轨道允许伸展）。
注意: grid-column-start 属性只能应用于网格容器的子项，即作为 display 取值为 grid 或 inline-grid 元素的子元素。
CSS grid-column-start 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-column-start 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-column-start 属性是如何使用的。
示例 1：grid-column-start 使用数字定义起始列线
<!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>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 2 行的网格容器，因此有 5 条垂直网格线（1, 2, 3, 4, 5）。
对于 item-1 来说，grid-column-start: 1; 表示将其放置在第 1 列。对于 item-2 来说，grid-column-start: 3; 表示将其放置在第 3 列……以此类推。
示例 2：grid-column-start 与 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: span 3; /* 从第 2 列线开始，向右跨越 3 列 */
}
.item-3 {
grid-column-start: 1;
grid-column-end: span 4; /* 从第 1 列线开始，向右跨越 4 列（填满整个宽度） */
grid-row-start: 3; /* 同时指定行，使其在底部 */
}
/* 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（跨 4 列）</div>
<div class="item-4">item 4</div>
<div class="item-5">item 5</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们定义了一个 4 列 4 行的网格容器。
- 对于 item-1 来说，grid-column-start: 1; grid-column-end: 3; 将其放置在第 1 列和第 2 列，从第 1 列线开始到第 3 列线结束。
- 对于 item-2 来说，grid-column-start: 2; grid-column-end: span 3; 将其放置在第 2 列、第 3 列和第 4 列。它从第 2 列线开始，并向右跨越 3 列。
- 对于 item-3 来说，grid-column-start: 1; grid-column-end: span 4; 将其从第 1 列线开始，向右跨越 4 列，占据了整个网格宽度。
