最常用响应式卡片网格写法是repeat(auto-fit, minmax(280px, 1fr)))，其中auto-fit自动收缩空列，gap控制间距，align-items与justify-items分别控制卡片自身垂直对齐和内部内容水平对齐。
用 grid-template-columns 控制列数和宽度
卡片网格的核心是让容器自动按列分配子项，不依赖 JavaScript 或浮动。关键在 grid-template-columns 的响应式写法：repeat(auto-fit, minmax(280px, 1fr))) 是最常用组合——minmax(280px, 1fr) 表示每列最小 280px、最大均分剩余空间，auto-fit 会让空列自动收缩消失。
常见错误是写成 auto-fill：它会保留所有可能列位（包括空的），导致右侧留白；而 auto-fit 才真正“自动排列”并填满容器。
- 移动端小屏下，
280px能保证单卡不被压扁，可按需调低到240px - 若需固定列数（如始终 3 列），直接写
repeat(3, 1fr)，但失去响应能力 - 避免用
px或%写死列宽，否则无法适配不同屏幕
卡片间距用 gap，别用 margin
gap 是 Grid 布局专治间距的属性，作用于行与列之间，且不会触发外边距合并、不影响卡片自身盒模型。用 margin 模拟间距会导致：首行/末行多出空白、响应式换行后间隙错乱、卡片内边距需额外抵消。
例如设置 gap: 1rem 后，所有卡片间横向纵向都保持 1rem 间距，且容器边缘无额外空隙——这是 margin 做不到的干净效果。
立即学习“前端免费学习笔记（深入）”；
-
gap在 Flex 布局中不生效，只对 Grid 和 Multi-column 有效 - IE 不支持
gap（需用grid-column-gap+grid-row-gap回退） - 若卡片有圆角或阴影，
gap能确保视觉间距一致，不被边框遮挡
卡片内容对齐靠 align-items 和 justify-items
卡片高度不一时（比如标题行数不同），默认会顶部对齐，底部参差。用 align-items: stretch（Grid 默认值）可拉伸卡片填满行高，但更可控的是设为 flex-start 或 center，再配合卡片内部 Flex 布局垂直居中。
注意：justify-items 控制卡片内内容的水平对齐（类似 text-align），而 align-items 控制卡片自身在格子中的垂直对齐。两者常一起用：
grid-container {
display: grid;
align-items: start; /* 卡片顶部对齐 */
justify-items: center; /* 卡片内内容水平居中 */
}- 不要在卡片上设
height: 100%强制等高——破坏了 Grid 的自然流式行为 - 若需所有卡片严格等高，用
align-items: stretch+ 确保子元素不溢出 -
place-items: center是justify-items和align-items的简写，但语义稍弱，调试时建议分开写
响应式断点只需改 minmax() 最小值
多数场景下，不需要为不同屏幕写多个 @media 块去重定义整个 Grid。只要调整 minmax() 的第一个参数即可：
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)));
}
}
@media (max-width: 480px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)));
}
}这样在小屏下自动变为单列，逻辑清晰且 CSS 更轻量。强行用 repeat(1, 1fr) 也可，但失去 auto-fit 对空列的清理能力，且不如 minmax(100%, 1fr) 明确表达“占满整行”意图。
- 避免在媒体查询里重复写
gap或align-items，除非真有布局逻辑变化 - 测试时重点看 320px、768px、1024px 这几个典型宽度，而不是盲目堆断点
- 如果卡片内图片尺寸不统一，记得给
img加width: 100%; height: auto;防止撑破网格
实际项目中最容易忽略的是 auto-fit 和 auto-fill 的语义差别，以及把 gap 当作“最后加上的装饰”而非布局基础——一旦用 margin 先写了间距，后续响应式调整就会不断打补丁。
