CSS Grid响应式需配合媒体查询实现，因其本身不自动响应；常用方法包括用@media切换grid结构、用repeat(auto-fit, minmax())自动调整列数、重定义grid-template-areas适配不同屏幕。
Grid布局本身不自动响应，必须配合媒体查询
CSS Grid 是二维布局系统，但 grid-template-columns 和 grid-template-rows 的值默认是静态的。它不会像 Flexbox 那样根据容器宽度自动折行，也不会像 Bootstrap 那样内置断点。所谓“Grid 响应式”，本质是靠媒体查询（@media）在不同视口下切换不同的 Grid 结构。
常见错误是只写一套 grid 规则，然后指望它在手机上自动变单列——这不会发生。必须显式定义小屏下的新网格。
- 桌面端用
grid-template-columns: 1fr 300px 1fr - 平板用
@media (max-width: 768px)改为1fr 1fr - 手机用
@media (max-width: 480px)改为1fr
用 minmax() + auto-fit 减少媒体查询数量
如果目标是让列数随容器宽度自动增减（比如从 4 列 → 2 列 → 1 列），可以避开写多个 @media，改用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))。
这个写法的意思是：尽可能多地放宽度 ≥300px 的列，每列等宽占满容器；当容器不够宽时，自动减少列数，不触发换行或溢出。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit会合并空轨道，auto-fill则保留空轨道（可能造成空白） - 注意：IE 不支持
auto-fit，需加@supports降级或单独写 IE 兼容方案 - 该方式适合卡片列表、图库等“同质化内容”，不适合主辅结构（如 sidebar + main）
响应式 Grid 中 grid-area 的重排要靠媒体查询重定义
用命名区域（grid-template-areas）做语义化布局时，小屏下常需改变模块顺序或合并区域。不能只改列数，必须在媒体查询里重新声明 grid-template-areas 和对应项的 grid-area。
.container {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
@media (max-width: 600px) {
.container {
grid-template-areas:
"header"
"main"
"nav"
"footer";
}
}
漏掉某条 grid-template-areas 声明，对应区域就会回到默认文档流，导致布局错乱。
- 所有用到
grid-area的子元素，在每个断点下都必须有明确归属 - 避免在不同断点中混用
grid-column和grid-area，容易冲突 - 调试时可临时加
outline: 1px solid red看区域边界
移动端优先还是桌面优先？取决于内容权重
传统响应式建议移动端优先（mobile-first），但 Grid 场景下需具体分析。如果核心内容是侧边导航+主内容（如后台系统），桌面结构更关键，建议桌面优先：先写完整三栏，再用 @media (max-width: 768px) 合并导航与主区；反之，若首页是瀑布流卡片，则移动端优先更自然。
- 桌面优先：基础 Grid 写大屏，
max-width降级，适合管理后台、数据看板 - 移动端优先：基础 Grid 写单列，
min-width升级，适合营销页、博客首页 - 别混合使用
max-width和min-width断点，易造成覆盖遗漏
grid-template-columns）和网格项位置（grid-row/grid-column）在不同断点下必须同步更新，缺一不可。否则看起来“样式生效了”，但布局依然错位。 
