要让 CSS Grid 的网格间距自适应，关键是合理使用 fr 单位、minmax() 函数以及 auto-fit 或 auto-fill 配合 repeat()。这样可以让网格容器根据可用空间自动调整列数和间距，实现真正的自适应布局。
通过
repeat(auto-fit, minmax(...))
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
说明：
gap 属性设置网格项之间的间距，不会影响整体布局的弹性：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem; /* 推荐使用相对单位 */
}
使用 rem 或 em 单位可以让间距随字体大小或屏幕尺寸变化，增强响应性。
虽然 auto-fit 已很灵活，但在特定断点微调能提升体验：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
<p>@media (min-width: 768px) {
.container {
gap: 20px;
}
}</p>在大屏上适当增大间距，视觉更舒适。
基本上就这些。核心是利用 auto-fit/fill + minmax 来实现内容驱动的布局，再配合 gap 管理间距。不需要 JavaScript，纯 CSS 就能实现流畅的自适应网格。
以上就是如何通过css grid设置网格间距自适应的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
927
收藏
