1. 动态自适应网格列数的核心要点
理解目标与约束
在前端布局中，目标是让网格列数随设备宽度自动调整，从而保持良好的可读性和美观度。动态自适应的核心在于用 CSS Grid 的能力将列宽与容器宽度解耦，让每一行的项目数量根据实际空间自动变化。
要把这一目标落地，必须掌握 display: grid 的作用、以及 grid-template-columns 的动态设置。通过这些属性，网格可以在不同宽度下用同一组规则产生不同的列排布，从而实现响应式布局。
本节要点还包括区分不同的实现策略，如采用 repeat() 函数和最小最大单元（ minmax() ）的组合，以及在不同断点下使用不同的策略，确保整体的一致性。
/* 典型自适应网格：宽度变化时自动填充列，单元最小宽度为 180px，剩余空间均分 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}
2. 使用 repeat() 实现自适应网格
repeat() 的工作原理
CSS grid 的 repeat() 函数允许你用一个规则重复若干次，结合 auto-fill 或 auto-fit，能够在容器宽度改变时自动增减列数，从而实现真正的自适应网格。
auto-fill 会尽可能多地创建网格列来填满容器，但若内容不足也会保留空白列；而 auto-fit 在没有内容的情况下会让空列“收缩”为零宽度，利于让有效项目占据更多空间。
下面给出两个对比示例，帮助理解这两种模式在实际页面中的效果差异与适用场景。
/* auto-fill 示例：尽可能多地填充列，留有空白列可能存在 */
.grid--fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;
}/* auto-fit 示例：空列会收缩为零宽度，内容占据更多空间 */
.grid--fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px;
}
3. 媒体查询结合实现更精细的响应式
设置断点与列数
尽管 repeat() 加上最小宽度的组合已经能实现基本的响应式网格，但在某些场景下你需要对不同屏幕尺寸进行更精细的控制。此时可以通过 媒体查询 在不同断点下调整网格模板列的最小宽度和列数。
通过在特定宽度区间内改变 minmax() 的下限值，或切换到不同的重复策略，可以确保在桌面、平板和手机等多种设备上都保持良好的视觉密度。
@media (min-width: 600px) {.grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 900px) {.grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
4. 实战案例：不同场景的网格调整
卡片布局的最小宽度策略
在实现卡片网格时，通常希望每个卡片具有稳定的可读性，因此会给出一个合适的最小宽度，随后让列数随屏幕扩大而增加。minmax(180px, 1fr) 是一个常见的选择，它确保每个网格项至少 180px 宽，同时尽可能地均分剩余空间。
结合媒体查询，可以在大屏幕上适当提高最小宽度以提升信息密度，同时在小屏幕上降低最小宽度以避免拥挤。请参考下面的实战代码结构。
内容卡片 1 内容卡片 2 内容卡片 3 内容卡片 4
/* 实战 CSS：网格容器与卡片样式 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 16px; }
.card { background: #fff; border: 1px solid #e5e5e5; padding: 12px; border-radius: 8px; }
@media (min-width: 600px) {.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (min-width: 900px) {.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
