HTML中Grid的grid-template-columns和rows定义轨道的方法-html教程-PHP中文网

grid 必须显式定义 grid-template-columns 和 grid-template-rows 才能正常工作；否则子项堆叠在单列或单行，仅设 display: grid 无效。

html中grid的grid-template-columns和rows定义轨道的方法

不写 grid-template-columns 和 grid-template-rows，Grid 就没真正开始工作——所有子项会堆在第一列或第一行里，看着像没生效。

浏览器看到 display: grid，只会创建一个空容器：默认只有 1 列、1 行，高度由内容撑开。子项按文档流顺序填进去，视觉上和普通 div 堆叠无异。这不是 bug，是规范行为。

grid-template-columns 必须显式定义列轨道（垂直方向的线），比如 1fr 2fr 或 repeat(3, 1fr)
grid-template-rows 必须显式定义行轨道（水平方向的线），比如 100px auto 或 minmax(100px, auto)
二者必须写在**容器元素**上；子项自己设 grid-column 或 grid-row 无法反向生成轨道
漏写其中任意一个？对应方向就退化为单轨：没写 grid-template-rows → 所有子项挤在第 1 行；没写 grid-template-columns → 所有子项堆在第 1 列

值是空格分隔的轨道尺寸序列，顺序从左到右。单位行为直接影响布局结果，不能凭直觉套用百分比逻辑。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

fr 是“剩余空间的一份”，不是百分比：200px 1fr 2fr 表示先扣掉 200px，剩下空间按 1:2 分配，不是总宽三等分
auto 让列宽收缩包裹内容，但若内容过宽，可能挤压其他 fr 列；建议搭配 minmax() 限制最小宽度
repeat(auto-fit, minmax(250px, 1fr)) 可响应式生成列数，但 auto-fit 会折叠空列，auto-fill 保留空白轨道
错误写法：repeat(3, 100px 200px) —— repeat() 第二个参数只能是单个值或函数，不能含空格
混合单位如 10% 1fr 合法，但 % 相对容器宽，fr 相对剩余空间，两者基准不同，结果难预测

它定义的是显式行轨道的高度，不写就等于只有一行且高度为 auto。隐式新增的行（比如子项定位到第 5 行但只声明了 3 行）不受其控制。

repeat() 在 grid-template-rows 中不支持 auto-fit 或 auto-fill —— 浏览器直接忽略整条声明
minmax(100px, auto) 很实用：保证最小高度，又允许内容撑开；而 minmax(100px, max-content) 会强制撑到最大内容高度
1fr 行高只在所有行都用 fr 时才等高；混入 px 或 auto 后，fr 行只分“扣除固定/自适应行之后的剩余高度”
若用 grid-template-areas，字符串网格的行数必须和 grid-template-rows 声明的轨道数严格一致，否则区域映射失败

当子项超出显式轨道范围（比如第 6 个子项用了 grid-column: 10），浏览器会自动创建隐式列或行。这些轨道默认大小为 auto，常导致高度塌陷、宽度错乱或滚动异常。

用 grid-auto-columns 控制隐式列宽，例如 grid-auto-columns: 1fr
用 grid-auto-rows 控制隐式行高，例如 grid-auto-rows: minmax(100px, auto)
注意：grid-auto-rows 不影响你已用 grid-template-rows 显式声明的那些行，只管“冒出来”的额外行
负数线号（如 grid-column: -2）指向最末一条**显式定义的线**，不是内容尾部——如果只写了 grid-template-columns: 1fr 1fr（共 3 条线），-2 指的是中间那条线，不是右边边界