grid-template-columns: 1fr 不能让子项垂直排列是因为 grid 默认按行优先填充，仅定义列宽不生成新行；需配合 grid-auto-rows: auto 和 grid-column: 1 实现每子项独占一行的垂直堆叠。
grid-template-columns: 1fr 为什么不能让子项垂直排列
写了 grid-template-columns: 1fr 却发现所有子项还挤在一行里，甚至只显示第一个——这不是浏览器 bug，是 Grid 的默认流向机制在起作用。Grid 默认按行优先（grid-auto-flow: row）填充，grid-template-columns: 1fr 只是把整行划成一列，但**不生成新行**；它不会为每个子项自动分配独立行轨道。
用 grid-auto-rows + grid-column 实现真正垂直堆叠
要让每个子项独占一行、上下堆叠，关键不是控制列，而是让 Grid 主动为每个子项开辟新行，并锁定列位置：
-
grid-auto-rows: auto：告诉 Grid “来一个子项就开一行，高度按内容定” -
grid-column: 1：强制每个子项落在第 1 列（避免 Grid 自动填满多列） - 不需要写
grid-template-rows，也不需要知道子项数量
最小可行代码：
ul {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
li {
grid-column: 1;
}
对齐和高度控制的常见陷阱
垂直堆叠后，默认顶部对齐，且若父容器没高度约束，轨道可能塌陷导致对齐失效：
- 加
align-items: start（或center）统一子项在行内的垂直位置 - 如果希望整个列表在容器中居中，需确保父容器有明确高度（如
min-height: 100vh），再配合place-content: center - 避免误用
grid-template-rows: 1fr——这只会创建**唯一一行**，所有子项重叠或溢出 - 子项若设了
align-self: start，会覆盖align-items，需检查是否被意外覆盖
和 flex-direction: column 的核心区别在哪
Grid 垂直堆叠不是模拟 Flex 的列流，而是靠轨道生成机制实现的二维控制：
- Flex 的
column是单维流式布局，子项无法跨行/跨列，也难精确控制每行高度 - Grid 的
grid-auto-rows: auto给每个子项分配独立行轨道，后续可单独设置某一项的grid-row: 1 / -1跨所有行，或用minmax(40px, auto)设最小高度 - 当需要“主内容跨两行 + 右侧两个小项各占一行”这类混合结构时，Grid 的行列协同能力远超 Flex
真正难的不是写那三行 CSS，而是理解 grid-auto-rows 才是决定“有多少行”的开关，而不是 grid-template-columns。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
