CSS grid-template-columns中auto-fit是什么？响应式网格相关代码作用是什么

这是CSS Grid布局中实现无媒体查询响应式网格的经典写法，各部分含义拆解如下：

• 外层属性 grid-template-columns：是Grid容器的核心属性，作用是显式定义网格的列轨道数量，以及每一列的宽度规则。
• repeat() 函数：Grid布局提供的工具函数，用来批量生成多个遵循相同规则的列轨道，避免手动重复书写多列相同的宽度配置。它接受两个参数：第一个参数是列的生成规则/重复次数，第二个参数是单条列轨道的尺寸规则。
• 第一个参数 auto-fit：动态列数计算关键字，会根据当前Grid容器的总宽度、以及列的最小宽度限制，自动计算当前行最多可以容纳多少列，超出数量的列会自动换行到下一行。和类似关键字auto-fill的区别是，auto-fit会自动折叠空的列轨道，让已有的列自动拉伸占满整行容器的剩余空间，不会出现右侧留白。
• 第二个参数 minmax(300px, 1fr)：定义单条列轨道的宽度范围，第一个值为宽度下限，第二个值为宽度上限：
  • 下限300px：表示每一列的宽度最小不能小于300px，小于这个宽度的时候当前行就会减少列数
  • 上限1fr：fr是Grid布局专属的自适应分配单位，1fr表示每一列最多可以平分容器的剩余可用空间，保证所有列均匀占满整行宽度。

实际效果示例 #

• 当容器宽度为1000px时，最多可以放下3列（3*300px=900px < 1000px），剩余100px会平均分配给3列，最终每列宽度约为333.33px
• 当容器宽度缩小到500px时，只能放下1列，列宽度自动拉伸到100%即500px
• 当容器宽度为700px时，刚好可以放下2列，每列宽度平分后为350px

这种写法不需要额外编写媒体查询，就能自动适配不同屏幕尺寸，实现列数随容器宽度动态调整的响应式效果。

内容的提问来源于stack exchange，提问作者m-naeem66622