CSS grid-auto-columns 语法
在 CSS 中，grid-auto-columns 属性用于指定隐式创建的网格列的大小。
当网格容器中的子项数量超过了显式定义的列（通过 grid-template-columns 或 grid-template-areas 定义），或者当子项被放置到这些显式列之外的区域时，网格会自动创建新的列来容纳这些子项，这些列被称为 “隐式网格列” 。
grid-auto-columns 允许你控制这些自动创建的列的大小，而不是让它们默认地自动适应内容。
语法：
grid-auto-columns: <track-size>+;说明：
grid-auto-columns 属性接受一个或多个 <track-size> 值。每个 <track-size> 值定义了一个或多个隐式列的尺寸：
auto（默认值）：列的尺寸将根据内容和 grid-auto-flow 的值自动调整。在大多数情况下，它等同于 minmax(min-content, max-content)。长度值：一个固定的长度值，如 100px, 5em, 2rem 等。百分比：一个相对于网格容器宽度的百分比值。fr：一个弹性长度，如 1fr。fr 单位表示可用空间的一个分数。min-content：列的尺寸将根据其内容所需的最小空间来确定。max-content：列的尺寸将根据其内容所需的理想（最大）空间来确定。minmax(min, max)：定义一个尺寸范围，列的大小将在 min 和 max 之间。例如，minmax(100px, auto) 表示列最小为 100px，最大自动适应内容。
当提供多个 <track-size> 值时，这些值会按顺序循环应用于后续隐式创建的列。例如，grid-auto-columns: 100px 200px; 意味着第一个隐式列是 100px，第二个是 200px，第三个又是 100px，依此类推。
此外，小伙伴们还要清楚以下几点。
- grid-auto-columns 只影响那些没有通过 grid-template-columns 或 grid-template-areas 显式定义的列。
- grid-auto-columns 通常与 grid-auto-flow: column; 或 grid-auto-flow: column-dense; 等属性结合使用，以更好地控制网格子项的自动放置行为。
注意: grid-auto-columns 属性只能用于网格容器自身，即定义了 display 取值为 grid 或 display: inline-grid 的元素。
CSS grid-auto-columns 摘要
| 属于 | CSS grid 布局 |
|---|---|
| 使用频率 | 中 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS grid-auto-columns 示例
接下来，我们通过几个简单的例子来讲解一下 CSS grid-auto-columns 属性是如何使用的。
示例 1：grid-auto-columns 定义固定宽度的隐式列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
/* 显式定义 2 行 */
grid-template-rows: repeat(2, 1fr);
/* 只显式定义 2 列 */
grid-template-columns: 100px 100px;
/* 设置隐式创建的列宽为 50px */
grid-auto-columns: 50px;
/* 确保子项在超出显式列时，能自动创建新列 */
grid-auto-flow: column;
width: 400px;
height: 200px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<div>item 1 (显式列)</div>
<div>item 2 (显式列)</div>
<div>item 3 (显式列)</div>
<div>item 4 (显式列)</div>
<div>item 5 (隐式列)</div>
<div>item 6 (隐式列)</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，我们显式定义了 2 行（repeat(2, 1fr)）和 2 列（100px 100px）的网格容器。
grid-auto-columns: 50px; 表示任何超出这两列的子项，在自动创建新列时，这些新列的列宽都将是 50px。而 grid-auto-flow: column; 确保了子项在填满显式行后，会优先填充新的列。
因此最终，item 1、item 2、item 3、item 4 会被放到显式列里面。从 item 5 开始，由于显式列已满，网格会自动创建新的列，这些新列的宽度都将是 80px。
示例 2：grid-auto-columns 循环定义隐式列尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
display: grid;
/* 显式定义 2 行 */
grid-template-rows: repeat(2, 1fr);
/* 不显式定义列，所有列都由 grid-auto-columns 控制 */
/* grid-template-columns: auto; */ /* 默认值 */
/* 关键：隐式列宽度交替为 100px 和 150px */
grid-auto-columns: 100px 150px;
/* 确保子项优先填充新列 */
grid-auto-flow: column;
width: 500px;
height: 200px;
background-color: lightskyblue;
}
.container > div {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid silver;
background-color: salmon;
}
</style>
</head>
<body>
<div class="container">
<div>item 1 (100px)</div>
<div>item 2 (100px)</div>
<div>item 3 (150px)</div>
<div>item 4 (150px)</div>
<div>item 5 (100px)</div>
<div>item 6 (100px)</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，网格容器 container 只定义了行，没有显式定义列。这意味着所有列都将是隐式创建的。
grid-auto-columns: 100px 150px; 表示：第一列 (item 1, 2) 将是 100px 宽。第二列 (item 3, 4) 将是 150px 宽。第三列 (item 5, 6) 又会回到 100px 宽。以此类推，形成一种宽度交替的效果。
此外，grid-auto-flow: column; 确保了子项是先填充列，然后再创建新列。
