使用 Grid 布局结合 repeat(auto-fill, minmax()) 可实现响应式网格，根据屏幕尺寸自动调整列数并均匀分布子元素；.container 设置 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，gap 控制间距；auto-fill 保留空轨道，auto-fit 折叠空轨道使内容更紧凑；无需媒体查询即可在大屏、平板、手机上自适应显示多列到单列；通过 .item 的 break-inside、overflow 和 img 的 max-width 确保内容适配，避免溢出，实现高效简洁的响应式布局。
要实现 CSS 响应式网格布局并自动填充子元素，推荐使用 Grid 布局 结合 repeat() 与 auto-fit 或 auto-fill 配合 minmax()。这样可以让容器根据屏幕尺寸自动调整列数，并均匀分布子元素。
基本语法结构
通过以下 CSS 设置，可以让网格容器在不同屏幕下自动换行并填满可用空间：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
- repeat(auto-fill, ...)：自动重复列轨道，有空间就生成新列
- minmax(200px, 1fr)：每列最小 200px，最大为 1fr（平均分配剩余空间）
- gap：设置子元素之间的间距
auto-fill 与 auto-fit 的区别
两者都能自动创建列，但行为略有不同：
- auto-fill：即使子元素不够，也会保留空轨道。适合希望留白扩展的场景
- auto-fit：会将空轨道折叠，让现有子元素拉伸填满容器
例如用 auto-fit 更紧凑：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
响应式无需媒体查询
上述写法已具备响应能力，浏览器会自动计算在当前容器宽度下能放下多少个最小 200px 的列。不需要写多个 @media 规则也能实现多列到单列的平滑过渡。
子元素内容自适应
确保子元素不会溢出或固定宽度影响布局：
.item {
break-inside: avoid; /* 避免内部断行 */
overflow: hidden;
text-overflow: ellipsis;
}
img {
max-width: 100%;
height: auto;
}
这样图片和文字能随网格缩放而适配。
基本上就这些。用 repeat(auto-fill, minmax()) 是目前最简洁高效的响应式网格方案，兼容现代主流浏览器。
