如何通过HTML的CSS Grid的grid-template-columns定义列轨道布局-html教程-PHP中文网

grid-template-columns 必须配合 display: grid 或 inline-grid 才生效，否则被忽略；其值定义列轨道，fr 按比例分配剩余空间，auto-fit 比 auto-fill 更适合响应式布局。

如何通过html的css grid的grid-template-columns定义列轨道布局

grid-template-columns 必须配合 display: grid 才生效

单独写 grid-template-columns 没用，浏览器根本不会识别它。容器元素必须先声明 display: grid 或 display: inline-grid，否则所有网格属性都被忽略。

常见错误现象：写了 grid-template-columns: 1fr 2fr，但子元素还是垂直堆叠——八成是漏了 display: grid。

块级网格容器用 display: grid
行内级网格容器（比如想让网格不独占一行）用 display: inline-grid
别误写成 display: grid-box 或其他不存在的值

列轨道值的写法决定布局行为

grid-template-columns 的每个值对应一列轨道，顺序从左到右。值的类型直接决定列宽是否固定、是否弹性、是否响应式。

典型组合示例：

grid-template-columns: 200px 1fr 300px：第1列固定200px，第2列占剩余空间，第3列固定300px
grid-template-columns: repeat(4, 1fr)：4列等宽，随容器缩放
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)))：每列至少250px，尽可能多填满容器，避免空列
grid-template-columns: 10% 2fr 1fr：混合单位合法，但注意百分比基于容器宽度，fr 基于剩余空间，计算逻辑不同

容易踩的坑：repeat(3, 100px 200px) 是错的——repeat() 第二个参数只能是单个值或函数，不能是空格分隔的多个值。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

fr 单位不是像素，也不等于百分比

1fr 表示“分配剩余可用空间的一份”，不是固定长度，也不等价于 33.33%。当存在固定尺寸列时，fr 列只分剩下的空间。

例如：grid-template-columns: 200px 1fr 1fr，容器宽 800px → 固定列占200px → 剩余600px由两个 1fr 平分 → 每列300px；而 33.33% 33.33% 33.33% 是按总宽800px直接算，每列约266.6px，结果完全不同。