使用CSS Grid实现响应式布局需设置display: grid，结合fr、minmax()和auto-fit实现弹性列，如repeat(auto-fit, minmax(250px, 1fr))；通过媒体查询在不同断点调整列数，或利用auto-fill/auto-fit实现智能填充，推荐auto-fit以适应内容，减少冗余代码，配合gap与padding优化间距，避免子元素固定尺寸影响灵活性，从而构建高效自适应网格。
使用 CSS Grid 实现响应式布局网格，关键在于灵活定义网格容器和子项，并结合媒体查询或 fr、minmax()、auto-fit 等单位自动适应不同屏幕尺寸。下面介绍几种实用方法。
1. 基础网格容器设置
先定义一个网格容器，使用 display: grid 启用网格布局。
.grid-container {
display: grid;
gap: 16px; /* 网格间距 */
padding: 16px;
}
2. 使用 fr 单位和 minmax() 创建弹性列
通过 grid-template-columns 结合 repeat() 和 minmax()，让列宽自动调整。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- auto-fit：自动填充可用空间，根据容器宽度决定显示多少列
- minmax(250px, 1fr)：每列最小 250px，最大为等分的 1fr
- 当屏幕变窄时，列会自动换行并重新分布
3. 配合媒体查询精细控制
在特定断点下调整列数或间距，提升小屏体验。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
<p>@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}</p>这种方式适合对不同设备有明确设计要求的场景。
4. 自动折行与内容自适应
利用 auto-fill 或 auto-fit，让网格更智能。
- auto-fill：填满所有可能的轨道，即使没有内容也占位
- auto-fit：只创建有内容的轨道，并拉伸填满容器
推荐使用 auto-fit，更适合响应式内容展示。
基本上就这些。合理使用 minmax() + repeat(auto-fit) 能大幅减少媒体查询代码，实现真正自适应的网格布局。不复杂但容易忽略细节，比如 gap 和 padding 的配合，还有子元素是否设置了固定宽高。保持灵活性是关键。
