grid-template-rows: 1fr 不能实现水平一行布局，因为它只定义行高，不控制子元素横向排列；真正起作用的是 grid-template-columns 和 grid-auto-flow 设置。
不能靠 grid-template-rows: 1fr 实现水平一行布局 —— 它只控制行高，不决定子元素排列方向。
为什么 grid-template-rows: 1fr 不管用
这个声明只是把“网格容器的第一行”设为占满可用高度的等比空间，和子元素横向铺开完全无关。Grid 的默认流向是 row（从左到右、从上到下），但前提是：你得有足够多的列来容纳子项，或者显式让它们不换行。
常见错误现象：display: grid + grid-template-rows: 1fr 后，多个子元素依然竖着堆成一列，甚至溢出容器。
- Grid 布局中，子元素是否“水平排成一行”，取决于
grid-template-columns和grid-auto-flow -
grid-template-rows只影响行轨道数量与尺寸，不影响列数或自动折行行为 - 如果没设
grid-template-columns，Grid 默认只有 1 列，所有子项自然叠在第一列里
真正起作用的是 grid-template-columns 和 grid-auto-flow
要让所有直接子元素水平排成一行，核心是让 Grid 提供足够宽的列轨道，并禁止自动换行。
- 最简方案：
grid-template-columns: repeat(auto-fit, minmax(0, 1fr))—— 动态生成尽可能多的等宽列，撑满容器 - 固定数量方案：
grid-template-columns: repeat(3, 1fr)—— 强制三列，子项按顺序填入 - 禁用换行：
grid-auto-flow: column（慎用）—— 改变自动放置方向为从上到下、从左到右列优先，但需配合grid-auto-columns - 更稳妥的单行控制：
grid-auto-flow: row dense+ 显式列定义，避免空隙干扰视觉流
容易被忽略的兼容性与行为细节
看似一行布局，实际在不同内容长度、容器宽度、字体渲染下表现差异很大。
-
minmax(0, 1fr)中的0是关键：防止minmax因最小值过大而失效，尤其在 flex/grid 混用时 - IE 不支持
auto-fit和minmax()，若需兼容，改用grid-template-columns: 1fr 1fr 1fr硬编码列数 - 子元素设了
width或min-width会挤压1fr计算，导致实际不均分或换行 -
grid-auto-flow: column在子项数量超过列数时，会垂直延伸容器高度，不是“强制一行”的安全解法
真正要“水平一行”，别盯 rows，先想清楚：你要的是固定列数？自适应列数？内容撑开还是均分？这些决定了该写哪组 grid-template-columns 值 —— 而不是调 grid-template-rows 的参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
