Grid面试重在真实场景决策：fr比%更可靠（不依赖父宽），auto-fit优于auto-fill（避免空列），grid-area命名须严格一致，gap对隐式轨道无效，二维布局需协同约束行列。
Grid 布局在面试中不是考你会不会写 display: grid，而是看你能不能在真实约束下选对方案、避开隐坑、解释清楚行为差异。
grid-template-columns 用 fr 还是 %？关键看容器有没有显式宽度
用 % 前提是父容器有确定宽度（比如设了 width: 800px 或 max-width），否则百分比会按内容撑开，结果不可控；fr 是基于剩余可用空间分配，不依赖父容器宽度，更可靠。
- 容器没设宽，子项用
grid-template-columns: 50% 50%→ 实际可能超出视口，尤其嵌套在 flex 容器里时 - 同场景改用
1fr 1fr→ 自动等分可用空间，无溢出风险 -
fr不能和auto混搭做比例计算（如auto 1fr合法，但auto 1fr 2fr中的fr会忽略auto占位后的剩余空间）
auto-fit 和 auto-fill 在 repeat() 里差在哪？响应式卡片布局常踩错
repeat(auto-fit, minmax(250px, 1fr)) 和 repeat(auto-fill, minmax(250px, 1fr)) 渲染结果可能一样，但行为逻辑不同：前者只生成“能放得下内容”的列，后者强制填满整行（哪怕最后几列空着）。
- 用
auto-fit：小屏下只显示 1 列，中屏 2 列，大屏 4 列，不留空白格 - 用
auto-fill：只要容器够宽，就按minmax()下限生成列，可能导致末尾出现空单元格（内容不足时） - 绝大多数响应式卡片场景应选
auto-fit，除非你明确需要占位对齐
grid-area 名字写错或漏定义，浏览器不报错但布局失效
grid-template-areas 是字符串拼接语法，名字必须完全一致，且每个引号内行列数要对齐。错一个字母、多一个空格、行列数量不匹配，整个声明会被浏览器静默丢弃——项目退回默认流式排列，很难排查。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 写成
"header header" "main sidebar"→ 合法（2×2） - 写成
"header header" "main sidebar footer"→ 第二行多一列，整条声明无效 -
.sidebar { grid-area: sibebar; }（拼错）→ 不生效，但控制台无提示 - 命名区域不能含短横线（
user-info❌），建议用驼峰或下划线（userInfo✅）
gap 属性不作用于 grid-auto-rows / grid-auto-cols 生成的隐式轨道
当你只写了 grid-template-columns，但子元素超出定义列数，浏览器会自动创建隐式行（grid-auto-rows 控制其高度），但此时 gap 对这些隐式行之间的间距无效。
- 显式定义三列：
grid-template-columns: 1fr 1fr 1fr，放 10 个子项 → 自动换行成 4 行，但第 2～4 行之间没gap - 解决方法：显式设
grid-template-rows: repeat(4, auto)，或改用grid-auto-rows: 100px+ 配合gap（仅当所有行高度一致时可行） - 更稳妥做法：用
grid-auto-flow: dense配合grid-row / grid-column手动定位，避免隐式轨道
真正容易被忽略的是：Grid 的“二维性”不是靠多写几行 CSS 实现的，而是靠你是否主动思考行与列的协同约束——比如一个 minmax() 同时出现在 grid-template-columns 和 grid-template-rows 里，它的行为完全不同。
