关键是要给父容器设置 display: grid（或 inline-grid），否则 grid-template-columns 等属性无效；Grid 仅作用于直接子元素，需注意尺寸上下文、线编号规则、gap 替代 grid-gap、1fr 含义及命名线用法。
直接在
里用 Grid 布局，关键不是“能不能”，而是“父容器有没有正确声明为网格容器”——漏掉
是最常导致布局完全没反应的原因。
必须给父容器加
Grid 不是自动生效的布局方式。哪怕你写了
，只要没设
或
，所有网格相关属性都会被浏览器忽略。
只对**直接子元素**生效：父容器设了
，它的子
index.htmldisplay: griddisplay: gridgrid-template-columnsdisplay: griddisplay: inline-griddisplay: grid
才是网格项；孙子元素不会继承网格上下文
别用
display: block
或其他值覆盖它：检查开发者工具的 computed 样式，确认
display
确实是
grid
inline-grid
适合嵌入行内流（比如放在段落中），但多数场景用
grid
更稳妥
grid-template-columns
和
grid-template-rows
怎么写才不空行
列/行定义决定网格骨架，写错单位或值会导致项目堆成一列、溢出、或高度塌陷。
用
repeat(3, 1fr)
比手写
1fr 1fr 1fr
更安全，避免空格或分号误写
1fr
是“剩余空间等分”，不是“1像素”；如果所有列都写
100px
且内容超宽，容器会横向滚动——这时该加
minmax(0, 1fr)
或设
overflow: hidden
行高写
auto
最常用；写死
100px
时，内容超长会被截断，需配合
grid-auto-rows: minmax(min-content, max-content)
自适应
别混用旧写法：
grid-gap
已废弃，统一用
gap
（同时控制行列间距）或分开用
row-gap
/
column-gap
项目没按预期位置显示？先查
grid-column
和
grid-row
的起止线
默认每个项目占一个单元格（从左到右、从上到下顺序填充），想跨格或精确定位，必须显式设置行列线。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
grid-column: 1 / 3
表示从第 1 条线开始，到第 3 条线结束（即跨两列），不是“占第 1 到第 3 列”
线编号从 1 开始，左边第一条竖线是 1，右边是
n+1
；顶部第一条横线是 1，底部是
m+1
用命名线更直观：
grid-template-columns: [start] 1fr [middle] 1fr [end]
，然后项目写
grid-column: start / end
如果项目设置了
grid-area
，它会覆盖
grid-column
/
grid-row
，调试时注意优先级
真正容易被忽略的是：Grid 容器的尺寸本身是否受父级约束。比如父容器是
display: flex
且未设宽高，Grid 容器可能收缩到内容宽度，导致
1fr
计算失准。动手前先确保容器有明确的块级上下文或尺寸锚点。