Grid双列自适应核心是fr配合auto或minmax()：基础用auto 1fr实现内容驱动+剩余空间分配；进阶用minmax(120px,max-content) 1fr防塌缩；等宽可用1fr 1fr或1fr minmax(300px,2fr)，辅以gap和justify-items提升实用性。
Grid双列自适应，核心是用 fr 分配弹性空间，搭配 auto 或 minmax() 控制内容驱动的列宽——不需要媒体查询，也不依赖固定像素值。
适合「侧边栏 + 主内容区」这类常见布局：
grid-template-columns: auto 1fr;其中：
- auto 列宽度由内部内容（如文字、图标）自然撑开，最小为内容宽度，不会被压缩；
- 1fr 列占据容器中所有剩余可用空间，随容器缩放自动伸缩。
小提示：如果 auto 列内容过长导致主列被挤窄，可加 min-width: 0 防止溢出（尤其内部有长单词或 URL 时）。
避免 auto 列在窄屏下塌缩为 0，也防止 fr 列过窄影响阅读：
grid-template-columns: minmax(120px, max-content) 1fr;说明：
- 左列至少 120px，最多不超过内容本身所需宽度（max-content）；
- 右列仍用 1fr 填满余下空间；
- 这样既保住了侧边栏可读性，又让主区域始终有足够宽度。
想让两列视觉上接近等宽，又不写死像素值？用两个 fr：
grid-template-columns: 1fr 1fr;或者更灵活一点：
grid-template-columns: 1fr minmax(300px, 2fr);这样右列基础和左列一样，但当容器变宽时，它能多占一点空间（上限为 2fr），更适合内容密度不同的场景。
别忘了加上间距与对齐控制，提升可用性：
基本上就这些。fr 和 auto 的组合不复杂，但容易忽略 minmax 和 min-width 这些细节——补上它们，双列 Grid 才真正健壮好用。
以上就是Grid网格布局怎么设置两列自适应宽度_利用fr单位与auto实现Grid双列自适应的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
900
收藏
