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

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

必须给父容器加 display: grid

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

• 只对**直接子元素**生效：父容器设了 display: grid，它的子 <div> 才是网格项；孙子元素不会继承网格上下文 <li>别用 <code>display: block 或其他值覆盖它：检查开发者工具的 computed 样式，确认 display 确实是 grid
• inline-grid 适合嵌入行内流（比如放在段落中），但多数场景用 grid 更稳妥

grid-template-columns 和 grid-template-rows 怎么写才不空行

列/行定义决定网格骨架，写错单位或值会导致项目堆成一列、溢出、或高度塌陷。


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
• 用 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 计算失准。动手前先确保容器有明确的块级上下文或尺寸锚点。