Grid容器必须显式声明display: grid，否则所有grid-*属性被忽略；响应式应重写grid-template-columns而非依赖minmax()；gap替代grid-gap并支持百分比；嵌套Grid需设min-height: 0防塌陷。
Grid容器必须显式声明display: grid
很多人写完grid-template-areas或grid-gap却没效果，根本原因是父容器没加display: grid——CSS Grid不会自动激活，它不像Flex那样有“隐式触发”逻辑。不写这行，所有grid-*属性全被浏览器忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认最外层布局容器（比如
<main></main>或<div class="layout">）设置了<code>display: grid - 避免在
display: inline元素上用Grid（如<span></span>），它不接受grid值 - 如果用了
float或position: absolute，Grid行为会异常——清掉这些旧布局残留再调试 - 在
@media (max-width: 768px)里直接重写grid-template-columns: 1fr，强制单列 - 用
grid-template-areas配合媒体查询切换区域顺序，比纯列数控制更直观（例如桌面"header header" "nav main" "footer footer"，手机变成"header" "nav" "main" "footer"） - 别在
grid-column里写span 2这种固定值去适配不同屏幕——改用grid-column: -1 / 1让内容撑满整行更可靠 - 统一用
gap替代grid-gap，连IE都不用管了（IE根本不支持Grid） - 如果要响应式间隙，写
gap: clamp(0.5rem, 2vw, 1.5rem)比媒体查询更简洁 - 注意
gap对子元素margin无影响，别指望它替代margin-bottom来控制段落间距 - 给父Grid项加
min-height: 0（不是height: 0！），这是解决塌陷的关键，因为Grid默认min-height: auto会撑开容器 - 子Grid若需滚动，直接在它自己上加
overflow-y: auto，别依赖父容器裁剪 - 避免在嵌套Grid里用
grid-template-rows: 1fr配合不确定高度内容——1fr会按可用空间均分，但“可用空间”在嵌套时极难预测
响应式断点里重定义grid-template-columns最稳妥
用minmax()或fr单位做自适应列宽很诱人，但真正在小屏下需要的是结构重组（比如把三栏变单栏），不是单纯缩放。靠grid-auto-fit+minmax()容易在窄屏卡出两列半这种尴尬布局。
实操建议：
立即学习“前端免费学习笔记（深入）”；
grid-gap不支持百分比，但gap可以
老项目里还见人写grid-gap: 5%，这行代码在所有浏览器都无效——grid-gap只接受px、rem、em等绝对/相对单位，不认百分比。而新标准gap（已全平台支持）才真正兼容%。
实操建议：
立即学习“前端免费学习笔记（深入）”；
嵌套Grid容易引发滚动条和尺寸塌陷
当一个Grid项内部又设display: grid，且这个子Grid内容高度超出父项时，常见现象是：父容器没滚动条、子Grid溢出不可见、或者整个页面莫名出现横向滚动条。
实操建议：
立即学习“前端免费学习笔记（深入）”；
Grid搭架构不难，难的是在嵌套、响应、内容动态变化这三者叠加时，哪一行min-height没设对，整个区域就突然消失或错位。
