推荐用 minmax(200px, 200px) 1fr 1fr：首列严格固定200px且语义明确，后续列用fr按比例分配剩余空间，兼容性好，避免auto-fill等动态布局干扰。
Grid网格布局中固定第一列宽度，同时让其余列按比例分配剩余空间，推荐用 minmax(200px, 200px) 1fr 1fr 这类写法——既锁死第一列像素宽度，又让后续列用 fr 弹性伸缩，无需 js 或额外 wrapper。
用 minmax(固定值, 固定值) 锁死第一列
很多人误以为 minmax() 只用于响应式范围，其实它也支持“最小=最大”的写法，等效于固定宽度：
-
minmax(200px, 200px)→ 第一列严格保持 200px，不随容器缩放 - 比直接写
200px更明确表达“不可压缩也不扩张”的语义 - 兼容性好（chrome 57+、firefox 52+、safari 10.1+ 均支持）
后续列用 fr 单位实现等比自适应
在固定第一列后，剩余列用 fr 单位，Grid 会自动把剩余可用空间按比例分配：
-
grid-template-columns: minmax(200px, 200px) 1fr 2fr;→ 第二列占剩余额外空间的 1/3，第三列占 2/3 - 如果所有后续列权重相同，比如
1fr 1fr 1fr，就自然三等分剩余空间 - 注意：
fr只作用于“可用空间”，不会侵占第一列的固定宽度
避免常见坑：auto / fit / fill 不适用此场景
像 grid-template-columns: 200px repeat(auto-fill, minmax(200px, 1fr))) 这类写法，适合响应式多列卡片，但不适用于“首列固定 + 后续弹性”的确定列数布局：
-
auto-fit和auto-fill会动态增减列数，破坏列结构预期 -
1fr在minmax()内部会被忽略（minmax(200px, 1fr)是无效的，因 1fr 无绝对值） - 直接写
200px 1fr 1fr虽然也能工作，但语义不如minmax(200px, 200px)清晰，且在某些旧版 Safari 中对固定列的渲染略不稳定
基本上就这些。核心就是：首列用 minmax(固定值, 固定值)，后面跟 fr 组合，简洁、可控、兼容性强。