推荐用 minmax(200px, 200px) 1fr 1fr：首列严格固定200px且语义明确，后续列用fr按比例分配剩余空间，兼容性好，避免auto-fill等动态布局干扰。
Grid网格布局中固定第一列宽度，同时让其余列按比例分配剩余空间，推荐用 minmax(200px, 200px) 1fr 1fr 这类写法——既锁死第一列像素宽度，又让后续列用 fr 弹性伸缩，无需 JS 或额外 wrapper。
很多人误以为 minmax() 只用于响应式范围，其实它也支持“最小=最大”的写法，等效于固定宽度：
minmax(200px, 200px) → 第一列严格保持 200px，不随容器缩放200px 更明确表达“不可压缩也不扩张”的语义在固定第一列后，剩余列用 fr 单位，Grid 会自动把剩余可用空间按比例分配：
grid-template-columns: minmax(200px, 200px) 1fr 2fr; → 第二列占剩余额外空间的 1/3，第三列占 2/31fr 1fr 1fr，就自然三等分剩余空间fr 只作用于“可用空间”，不会侵占第一列的固定宽度像 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 组合，简洁、可控、兼容性强。
以上就是Grid网格布局如何固定第一列宽度_利用minmax与固定值结合fr实现的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
324
