必须写 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 切换更清晰：
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
.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 审查时才暴露出来。
