使用 grid-template-columns 配合 repeat(auto-fit, minmax()) 实现自适应导航栏：通过设置 display: grid 启用网格布局，repeat(auto-fit, minmax(100px, 1fr)) 确保导航项最小宽度为100px并均分容器空间，auto-fit 自动填充有效列数，结合 gap 控制间距；在小屏幕下可通过媒体查询将 minmax 最小值调整为80px，实现响应式适配，无需复杂代码即可让导航项自动换行与伸缩，是现代CSS中高效简洁的布局方案。
要实现一个自适应宽度的Grid导航栏，关键在于使用 grid-template-columns 结合 repeat() 和 auto-fit 或 auto-fill 配合 minmax()。这样可以让导航项在不同屏幕尺寸下自动换行并均分可用空间。
基本HTML结构
先定义一个简单的导航结构：
使用 grid-template-columns 和 repeat 实现自适应
通过以下CSS设置，让导航项自动根据容器宽度调整列数：
.navbar {display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
padding: 10px;
background-color: #f0f0f0;
}
.navbar a {
text-align: center;
text-decoration: none;
color: #333;
padding: 10px;
background-color: white;
border-radius: 4px;
}
参数说明与实践建议
理解每个关键属性的作用，能更好控制布局效果：
立即学习“前端免费学习笔记（深入）”；
- display: grid：启用Grid布局模式
- repeat(auto-fit, ...)：自动填充列数，auto-fit 会拉伸项目填满容器，auto-fill 则保留空轨道
- minmax(100px, 1fr)：每列最小100px，最大为等分的弹性空间（1fr）
- gap：设置项目之间的间距，避免拥挤
你可以根据实际需求调整 minmax() 中的最小值。比如手机端设为80px，桌面端可设为120px，结合媒体查询更精细控制：
@media (max-width: 600px) {.navbar {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
基本上就这些。用 repeat(auto-fit, minmax()) 是实现响应式Grid导航最简洁高效的方式，无需媒体查询也能良好适配，是现代CSS布局的推荐做法。
