最常用方式是CSS Grid结合minmax()与auto-fit实现响应式网格，通过grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))让列宽自适应并自动换行，配合gap设置间距，无需媒体查询即可自然响应；若需精确控制断点，可搭配媒体查询分别设置小屏1列、平板2列、桌面3列；fr单位用于弹性分配空间，如1fr:2fr布局；auto-fill与auto-fit类似但保留空轨道，适合卡片布局；推荐优先使用auto-fit方案，简洁高效且自适应性强。
实现响应式网格布局，最常用的方式是使用 CSS Grid 和 Flexbox 结合媒体查询，其中 CSS Grid 更适合二维布局场景。以下是几种实用方法。
使用 CSS Grid + minmax() + auto-fit
这是现代浏览器中最简洁高效的响应式网格方式。通过 grid-template-columns 配合 repeat()、minmax() 和 auto-fit，可以让网格项根据容器宽度自动换行和调整大小。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- minmax(250px, 1fr) 表示每个列最小 250px，最大占满可用空间（1fr）
- auto-fit 让浏览器自动填充列数，空间不足时自动换行
- 无需写媒体查询，布局会自然响应
结合媒体查询精细控制
如果你需要在不同屏幕尺寸下精确控制列数，可以搭配媒体查询使用固定 repeat 数量。
.grid {
display: grid;
gap: 16px;
}
<p>/<em> 小屏：1列 </em>/
@media (max-width: 576px) {
.grid {
grid-template-columns: 1fr;
}
}</p><p>/<em> 平板：2列 </em>/
@media (min-width: 577px) and (max-width: 992px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>/<em> 桌面：3列或更多 </em>/
@media (min-width: 993px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}</p>这种方法兼容性好，适合对布局有明确断点需求的项目。
使用 fr 单位实现弹性分配
fr 是网格特有的弹性单位，表示“可用空间的份数”。你可以混合使用 fr、px、% 等单位来创建复杂的响应式结构。
.layout {
display: grid;
grid-template-columns: 1fr 2fr; /* 侧边栏窄，主内容宽 */
gap: 20px;
}
在小屏幕上可通过媒体查询将其变为单列：
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
}
配合 auto-fill 与 minmax 实现密集布局
与 auto-fit 类似，auto-fill 也会生成尽可能多的轨道，但不会合并空轨道，适合卡片类等高元素。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
区别：
- auto-fit：挤掉多余空白，拉伸已有项目
- auto-fill：保留所有可能轨道，即使为空
基本上就这些。推荐优先使用 repeat(auto-fit, minmax(最小宽度, 1fr)) 方案，简单、语义清晰且高度自适应，不复杂但容易忽略细节如 gap 和最小宽度设置。
