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份。
适用场景：
大师兄智慧家政
58到家打造的AI智能营销工具
99 查看详情 页面结构比较固定，例如网页的侧边栏+主内容区+右侧边栏。你希望每一列的宽度都精确控制，而不是让浏览器自动决定。
注意点：
如果你在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布局。
以上就是CSS中grid-template-columns和grid-auto-columns的区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1104327.html
微信扫一扫 
支付宝扫一扫 
