使用fr单位、minmax()函数及auto-fit实现列宽自动调整。1. fr按比例分配剩余空间，如1fr和2fr将容器分为三份。2. repeat(auto-fit, minmax(150px, 1fr))使列数随容器宽度变化，每列最小150px，最大1fr。3. max-content根据内容宽度设置列，auto填充剩余空间。4. 建议结合gap和min-width优化布局，确保响应式效果。
在CSS中实现网格布局的列宽自动调整，主要依靠 Grid Layout（网格布局） 中的 fr 单位、minmax() 函数以及 auto-fit 或 auto-fill 配合 repeat() 使用。这些工具可以让列宽根据容器空间和内容动态调整，无需固定像素值。
使用 fr 单位实现弹性列宽
fr（fraction）单位表示可用空间的一部分。使用它可以让列按比例分配剩余空间。
.grid-container {display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
上面例子中，第一列占1份，第二列占2份，总3份，列宽会自动按比例伸缩。
结合 repeat() 和 auto-fit 实现自动列数
当希望列数根据容器宽度自动增减时，可以使用：
立即学习“前端免费学习笔记（深入）”；
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
说明：
翱翔购物SoarShop 2005
下载
1) 用户无需考虑系统的设计、安装、维护，会上网就会操作；2) 美观、友好的展示页面，顾客可以方便地查询、订购商品； 3) 用户可以方便、自主地定义各种商品信息、调整页面布局； 4) 网站采用MD5不可逆转加密以及防SQL注入；5) 商品价格后台成批修改,创目前商城之首;
- auto-fit：自动填充列，将可用空间合理分配给每一列。
- minmax(150px, 1fr)：每列最小150px，最大占据1份弹性空间。
- 当容器变窄时，列会换行（实际是减少每行列数），保持响应式。
根据内容自动调整列宽
如果希望列宽由内容决定，可使用 max-content、min-content 或 auto：
display: grid;
grid-template-columns: max-content auto;
}
第一列宽度等于其内容的最大宽度，第二列填满剩余空间。适合表格类布局或表单排版。
实用建议
要实现真正灵活的自动调整：
- 优先使用
minmax()+auto-fit组合，适应不同屏幕。 - 设置
min-width防止内容溢出或列过窄。 - 配合
gap控制间距，避免拥挤。 - 在小屏设备上测试自动换列效果。
基本上就这些。用好 fr 和 auto-fit，就能让网格列宽自然适应内容与容器，实现现代响应式布局。
