不能。grid-template-columns: 1fr 仅定义单列，grid 默认行优先布局，子项仍从左到右排列；实现垂直列表需用 grid-auto-rows: auto + 每个子项设 grid-column: 1。
grid-template-columns: 1fr 是不是就能让子项垂直排列？
不能。这是最常见的误解——grid-template-columns: 1fr 只是把**整行**划成一列，但 Grid 默认按**行优先（row-wise）** 布局：子元素仍从左到右、换行后继续填下一行，视觉上还是“横着排”，只是每行只有一列而已。
真正要实现垂直列表（即每个子项独占一行、自上而下堆叠），关键不在列定义，而在控制**行的生成方式和子项的放置顺序**。
如何让 Grid 子项自动换行成垂直列表？
用 grid-auto-flow: column 不行（那是列优先，会挤成一列多行，但内容方向仍是水平的）；正确做法是保持默认 grid-auto-flow: row，并配合以下任一方式：
- 显式定义每项占一行：
grid-template-rows: repeat(auto-fit, minmax(40px, 1fr))，同时设grid-template-columns: 1fr - 更轻量的做法：直接用
display: contents配合flex-direction: column——但这就不是 Grid 了，属于替代方案 - 最稳妥的 Grid 做法：省略
grid-template-rows，改用grid-auto-rows: auto+ 每个子项设grid-column: 1，强制所有项都落在第 1 列
示例（纯 Grid 垂直列表）：
ul {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
li {
grid-column: 1;
}
为什么不用 grid-template-rows: 1fr？
grid-template-rows: 1fr 会让所有子项**挤在同一行内**（因为只定义了一行），然后 Grid 会把它们全部塞进这一行里——结果是横向重叠或溢出，而不是垂直排列。
常见错误现象：grid-template-rows: 1fr + 多个 li → 页面只显示第一个 li，其余不可见或被裁剪。
真正需要的是“不限行数、每行一个格子”，所以必须用 grid-auto-rows（自动创建行）而非固定行数的 grid-template-rows。
兼容性和性能要注意什么？
grid-auto-rows 和 grid-column: 1 在现代浏览器中兼容性很好（Chrome 57+、Firefox 52+、Safari 10.1+），但 IE 完全不支持 Grid，别指望降级。
性能上，如果列表项极多（比如上千条），Grid 的自动行生成比 Flex 的 flex-direction: column 略重一点，但日常几百项完全无感。
容易被忽略的一点：Grid 垂直列表里，如果某个 li 内容高度不一致，又没设 align-items，默认会顶部对齐——看着像“错位”，其实是正常行为；加 align-items: stretch 才能拉齐高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
