必须写 display: grid 在父容器上，否则 grid-template-columns 等属性无效；用 repeat(auto-fit, minmax(300px, 1fr)) 实现响应式列数；命名线比 grid-area 更适合跨设备区域重排；grid-auto-flow: dense 会破坏 DOM 顺序，影响无障碍和交互。
Grid 布局要不要先写 display: grid？
必须写，而且得写在父容器上——这是开启 Grid 的唯一开关。没这行声明，grid-template-columns、grid-gap 这些属性全无效。常见错误是只给子元素加 grid-column 却忘了父级没设 display: grid，结果样式完全不生效。
顺带一提：display: inline-grid 也合法，适合嵌入行内流布局中，但多数响应式场景用 display: grid 更稳妥。
怎么用 grid-template-columns 实现「移动端一列、平板两列、桌面三列」？
别硬写媒体查询，直接用 repeat() + minmax() + auto-fit 组合：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
解释一下关键点：
立即学习“前端免费学习笔记（深入）”；
-
minmax(300px, 1fr)表示每列最小 300px，最大均分剩余空间 -
auto-fit会让空列收缩消失，实际列数随容器宽度自动调整 - 300px 是临界值，小屏下自然回退为 1 列；平板宽过 600px 就出 2 列；桌面宽过 900px 就出 3 列
- 比手写
@media更轻量，且无断点跳跃感
grid-area 和命名线（named lines）哪个更适合复杂响应式区域？
命名线更灵活，尤其涉及跨设备重排时。比如侧边栏在桌面是左栏，在手机要移到顶部，用命名线配合 grid-template-areas 切换更清晰：
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
@media (max-width: 768px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
注意两点：
-
grid-template-areas中每个字符串代表一行，引号内用空格分隔区域名 - 区域名必须和子元素的
grid-area值完全一致（大小写敏感） - 留空用
.，比如"header header" "main ."表示右侧留白
为什么 grid-auto-flow: dense 在响应式里容易出问题？
它会让 Grid 自动填充空缺位置，看似“省事”，但会打乱 DOM 顺序，导致：
- 屏幕阅读器读取顺序错乱
- 键盘 Tab 焦点跳转不可预测
- 移动端折叠/展开逻辑依赖 DOM 位置时失效
除非明确需要“填空式”视觉排列（比如瀑布流卡片），否则响应式布局中建议保持默认 grid-auto-flow: row，靠 grid-row/grid-column 显式控制位置。
真正难的不是写几行 Grid，而是想清楚哪些区域必须保持语义顺序、哪些可以视觉重组——这点常被忽略，直到做无障碍测试或 SEO 审查时才暴露出来。
