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 时）。
更稳健的双列：用 minmax() 限制最小宽度
避免 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），更适合内容密度不同的场景。
配合 gap 和对齐，让布局更实用
别忘了加上间距与对齐控制，提升可用性：
- 用 gap: 1rem 统一内外边距，比手动设 margin 更干净；
- justify-items: stretch（默认）确保子项默认撑满列宽；
- 若某项只想居中，单独设 justify-self: center 即可。
基本上就这些。fr 和 auto 的组合不复杂，但容易忽略 minmax 和 min-width 这些细节——补上它们，双列 Grid 才真正健壮好用。