display: grid 是现代网格布局唯一正解，但需确保父容器正确设为网格容器、有有效宽度且处于常规文档流，否则 grid 属性无效；grid-template-columns 按场景选用 repeat()、百分比或混合值；定位时注意线号逻辑和区域命名优先级；grid 与 flex 各司其职，依维度需求选择嵌套。
直接用 display: grid 就是现代 HTML 网格设计的唯一正解，不需要框架、不依赖 JS、不拼 float 或 inline-block —— 但前提是父容器真被识别为网格容器，否则所有 grid-column、grid-template-columns 都是摆设。
为什么 grid-layout 不生效？90% 是因为这三件事没做
浏览器根本不认你写的网格属性，不是语法错，而是上下文缺失：
- 父容器没加
display: grid或display: inline-grid—— 所有子项的grid-column属性在非网格容器里完全被忽略 - 父容器宽度为
0或未设置（比如空 div、未设width/max-width、未继承父宽），导致轨道塌陷，看着像“没反应” - 父容器被
float、position: absolute或display: contents干扰了文档流，Grid 要求容器参与常规流才能计算轨道
调试时打开开发者工具，直接看父元素的 Computed 样式里有没有 display: grid 和实际生效的 grid-template-columns 值，比查控制台报错更直接。
grid-template-columns 写法选哪个？按场景分
固定列数、等宽、响应式自适应、内容驱动高度……不同目标对应不同写法，混用容易出错：
- 三列等宽卡片墙：
grid-template-columns: repeat(3, 1fr)—— 简洁，但缩放或字体变化时可能因子项内容撑开导致列宽微差 - 九宫格（严格 3×3）：
grid-template-columns: 33.33% 33.33% 33.34%—— 百分比堵住浮点误差，配合grid-gap: 8px（别用gap别名，IE11 不认） - 响应式自适应列数：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))—— 最小 250px，超出自动换行，比媒体查询写三套更轻量 - 混合比例布局（如侧边栏+主内容）：
grid-template-columns: 200px 1fr或150px minmax(300px, 1fr) 200px—— 固定值 + 弹性值组合，避免用%和fr混搭引发计算歧义
grid-column 和 grid-row 定位时最常踩的坑
写坐标线编号看似直观，但线号和跨距逻辑容易反直觉：
-
grid-column: 2 / 4表示从第 2 条线开始、到第 4 条线结束（即跨 2 列），不是“占第 2 和第 4 列” -
grid-column: 1 / -1是横跨全部列的最简写法，比span 12更鲁棒，不受预设列数限制 - 用
grid-area命名区域（如grid-template-areas: "header header" "main sidebar"）后，就别再给同一元素加grid-column—— 后者会覆盖前者，调试时很难发现 -
grid-row: span 2等价于grid-row: auto / span 2，但显式写auto / span 2更易读，尤其当你要强调起始行为“由内容决定”
Grid 和 Flexbox 到底谁嵌谁？别硬套“宏观/微观”话术
真实项目里不是“Grid 做骨架、Flex 做细节”，而是看维度需求：
- 需要同时约束行高 + 列宽 + 项目跨格 → 用 Grid 容器（比如仪表盘左导航+右数据表格+底部状态栏）
- 只沿一个方向排列、对齐、伸缩（比如按钮组、表单项标签+输入框、文章标题+副标题）→ 用 Flex，
display: flex在 Grid 项内部完全合法且高效 - 千万别把 Grid 当 Flex 用：在 Grid 容器上只设
justify-content想居中所有子项？它不会生效 —— Grid 的对齐要靠justify-items/align-items或子项自身的justify-self
真正容易被忽略的是：Grid 的 grid-auto-flow 默认是 row，当子项没指定位置时，它按行优先填满；如果内容天然按列组织（比如时间轴、垂直滚动列表），记得设成 column，否则布局会意外错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
