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