index.html中如何使用Grid布局？-html教程-PHP中文网

关键是要给父容器设置 display: grid（或 inline-grid），否则 grid-template-columns 等属性无效；Grid 仅作用于直接子元素，需注意尺寸上下文、线编号规则、gap 替代 grid-gap、1fr 含义及命名线用法。

index.html中如何使用grid布局？

直接在 index.html 里用 Grid 布局，关键不是“能不能”，而是“父容器有没有正确声明为网格容器”——漏掉 display: grid 是最常导致布局完全没反应的原因。

必须给父容器加 `display: grid`

Grid 不是自动生效的布局方式。哪怕你写了 grid-template-columns，只要没设 display: grid 或 display: inline-grid，所有网格相关属性都会被浏览器忽略。

只对**直接子元素**生效：父容器设了 display: grid，它的子 才是网格项；孙子元素不会继承网格上下文
别用 display: block 或其他值覆盖它：检查开发者工具的 computed 样式，确认 display 确实是 grid



inline-grid 适合嵌入行内流（比如放在段落中），但多数场景用 grid 更稳妥

grid-template-columns 和 grid-template-rows 怎么写才不空行
列/行定义决定网格骨架，写错单位或值会导致项目堆成一列、溢出、或高度塌陷。

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										

用 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 的起止线
默认每个项目占一个单元格（从左到右、从上到下顺序填充），想跨格或精确定位，必须显式设置行列线。


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 计算失准。动手前先确保容器有明确的块级上下文或尺寸锚点。