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

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，结果完全不同。

• 多个 fr 值之间按比例分配，如 1fr 2fr 1fr → 比例为 1:2:1
• fr 在容器宽度变化时自动重算，适合响应式，但无法设最小/最大限制（需配合 minmax()）
• 不要在非网格容器里用 fr，它只在 grid 或 inline-grid 上下文中有效

auto-fill 和 auto-fit 在响应式列数控制中表现不同

两者都用于动态生成列数，但行为关键差异在于“空轨道是否保留”：

• repeat(auto-fill, minmax(200px, 1fr)))：即使没有足够内容填满最后一列，也会渲染该列（留白）
• repeat(auto-fit, minmax(200px, 1fr)))：空列会被折叠，实际列数更紧凑

绝大多数响应式栅格场景应优先用 auto-fit，否则小屏下可能出现不可见的空白列，影响布局密度和滚动体验。

注意：auto-fill / auto-fit 只在 repeat() 内部有效，不能单独作为 grid-template-columns 的值。