div标签本身无对齐功能，需css控制；display: grid必须配合grid-template-columns（如repeat(auto-fit, minmax(280px, 1fr))）才能生效，否则退化为单列；gap替代margin实现间距，避免最后一行多余空白。
div 标签本身不能完成结构对齐——它只是语义中性的容器，对齐行为完全由 CSS 控制。想靠写几个 <div></div> 就实现网格、居中、多列对齐，一定会失败。
为什么写了 display: grid 却没看出“网格”效果
根本原因是：只设了 display: grid，但没定义任何轨道（列或行）。浏览器不会自动猜你要几列，grid-template-columns 是必须项，漏掉就退化成单列堆叠。
- 现象：子元素垂直排成一列，间距奇怪，宽度撑不满容器
- 检查点：给容器加
border: 1px solid red，再看是否真有“列”的视觉边界 - 常见错误写法：
grid-template-columns: 1fr—— 这等于只声明一列，不是“自适应多列” - 正确起步写法：
grid-template-columns: repeat(3, 1fr)或更健壮的repeat(auto-fit, minmax(250px, 1fr))
如何让三栏布局在小屏自动收为单列
响应式不是靠媒体查询硬切，而是用 grid-template-columns 内置的弹性机制。直接写死 300px 300px 300px 或 33% 33% 33% 在窄屏必然溢出或折行错乱。
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) -
auto-fit会合并空轨道，auto-fill则保留空槽——日常布局几乎只用auto-fit -
minmax(280px, 1fr)表示：每列至少 280px，剩余空间按比例分；小屏下自动减少列数，最终剩一列 - 别混用单位：
200px 1fr 1fr可以，但50% 1fr 1fr容易因百分比基准不一致导致错位
gap 和 margin 混用会导致最后一行留白
很多人习惯给每个网格项加 margin-bottom 模拟行间距，这在 Grid 中是反模式。一旦开启 gap，再手动加 margin，会在最后一行下方多出一倍空白，且响应式换列时错位加剧。
-
gap是容器级属性，只作用于项目之间，不影响外边距逻辑 - 旧写法
grid-gap已废弃，统一用gap（现代浏览器全支持） - 若某项目需特殊偏移（如跨列标题），用
grid-column: 1 / -1，而不是靠 margin 推 - 绝对定位项目（
position: absolute）不参与gap计算，这点调试时容易忽略
真正卡住人的地方，往往不是语法记不住，而是忘了 grid-template-columns 不是可选项——它和 display: grid 是绑定生效的最小单元。少写这一行，整个布局就还在文档流里原地踏步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
