grid-template-columns用于手动定义列宽，适用于固定结构布局；grid-auto-columns用于自动创建列，适用于动态内容扩展。例如：grid-template-columns: 200px 1fr 2fr; 定义三列宽度；而grid-auto-columns: 150px; 控制自动生成的列宽。使用时，若内容超出手动定义的列数且设置grid-auto-flow: column，则浏览器会自动生成新列并应用grid-auto-columns的值。两者可共存，互不干扰，分工明确。
在CSS Grid布局中，grid-template-columns和grid-auto-columns虽然都跟列的尺寸有关，但它们的作用完全不同。
简单来说：
-
grid-template-columns是你明确规划出来的列，适用于你已经知道内容结构、想手动控制每一列宽度的情况。 -
grid-auto-columns则是自动创建出来的列，用于处理那些没有被你提前安排的位置的内容，浏览器会根据需要自动生成列并应用这个设置。
下面具体说说它们的区别和使用场景。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns：手动定义列宽
这是最常用的Grid属性之一，用来明确定义网格中的列数量和每列的大小。
比如：
.grid {
display: grid;
grid-template-columns: 200px 1fr 2fr;
}这段代码表示这个网格有三列，第一列固定200px宽，第二列占剩余空间的1份，第三列占2份。
适用场景：
- 页面结构比较固定，例如网页的侧边栏+主内容区+右侧边栏。
- 你希望每一列的宽度都精确控制，而不是让浏览器自动决定。
注意点：
- 如果你在HTML里放了超过定义列数的子项，超出的部分会被放到下一行（如果没设置
grid-auto-flow为column的话），或者被隐藏掉。 - 可以用
repeat()函数简化重复列的写法，例如：grid-template-columns: repeat(3, 1fr);表示3列等分宽度。
grid-auto-columns：自动创建列时的默认行为
当你没有显式定义所有列的时候，浏览器就会“自动”创建新列来容纳多余的内容。这时，grid-auto-columns就决定了这些自动创建列的宽度。
举个例子：
.grid {
display: grid;
grid-template-columns: 200px 1fr;
grid-auto-columns: 150px;
grid-auto-flow: column;
}这里前两列是手动定义的，但如果你放了更多元素进去，它们会被排成新的列，并且每列宽度是150px。
适用场景：
- 内容数量不确定或动态变化，比如一个不断追加卡片的画廊。
- 想让新增的列保持一致的大小，而不用每次都去改
grid-template-columns。
常见问题：
- 默认情况下，
grid-auto-columns的值是auto，也就是自动适应内容，可能造成列宽不统一。 - 如果你不设置
grid-auto-flow: column，那么新增内容不会变成新列，而是换行作为新行。
总结区别与使用建议
| 特性 | grid-template-columns | grid-auto-columns |
|---|---|---|
| 是否手动定义 | 是 | 否 |
| 控制哪些列 | 明确指定的列 | 自动创建的列 |
| 常见用途 | 固定结构布局 | 动态内容扩展 |
使用建议：
- 如果你知道有多少列，优先用
grid-template-columns。 - 如果内容会动态增加，又不想破坏整体样式，记得配合
grid-auto-columns和grid-auto-flow一起使用。 - 两者可以同时存在，互不干扰。
基本上就这些。这两个属性看起来差不多，但在实际布局中分工很明确，理解清楚后能更灵活地控制Grid布局。
