grid-auto-columns属性设置网格容器中列的大小。

此属性仅影响未设置大小的列。
参考：https://www.w3schools.com/cssref/pr_grid-auto-columns.asp

grid-template-columns属性指定网格布局中的列数（和宽度）。

这些值是以空格分隔的列表，其中每个值指定各自列的大小。
参考：https://www.w3schools.com/cssref/pr_grid-template-columns.asp

不同之处在于grid-auto-columns让列自动调整到其值，而grid-template-columns要求您设置所需的确切网格。
最常见的替代方案应该是grid-template-columns，因为您使用CSS网格的原因可能是为了设置更复杂的设计。
我举几个例子来说明这种区别，你会看到它是什么：
一个两列，创建方式为：
grid-auto-columns: 100px;
并且为了实现与模板列相同的目的：
grid-template-columns: 100px 100px;
如果要添加第三列，grid-auto-columns保持不变，但对于template-columns为：
grid-template-columns: 100px 100px 100px;
如果没有定义第三列，元素将使用可用区域

1.-网格-自动-列

设置默认网格大小。您可以添加任意数量的列，列将自动设置为该值。

用法

在本例中，我们将网格设置为自动以使用全宽：
第一个

2.-网格-模板-立柱

设置列的宽度。如果定义了额外的列，则不匹配的列将使用剩余的空间，从而产生意外的结果。

用法

布局结果与grid-auto-columns相同
第一次

第一个