搞懂grid-template-columns和grid-auto-columns的区别，轻松掌握CSS网格布局

想要玩转CSS Grid布局？搞懂`grid-template-columns`和`grid-auto-columns`至关重要！本文深入解析这两个属性的区别与用法，助你轻松驾驭网格布局。`grid-template-columns`用于**手动定义列宽**，适用于页面结构固定的场景，例如精确控制侧边栏和主内容区域的宽度。而`grid-auto-columns`则负责**自动创建列**，当内容超出预设列数，且`grid-auto-flow: column`时，浏览器会自动生成新列，并应用`grid-auto-columns`的值。两者可以同时使用，互不影响，`grid-template-columns`负责规划已知列，`grid-auto-columns`则处理动态扩展的内容。掌握它们，让你的网页布局更加灵活高效！

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-auto-flow一起使用。
• 两者可以同时存在，互不干扰。

基本上就这些。这两个属性看起来差不多，但在实际布局中分工很明确，理解清楚后能更灵活地控制Grid布局。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《搞懂grid-template-columns和grid-auto-columns的区别，轻松掌握CSS网格布局》文章吧，也可关注golang学习网公众号了解相关技术文章。