使用 minmax()、fr 和 auto-fit 可实现无需媒体查询的响应式两列布局，通过 grid-template-columns 灵活分配列宽，结合 max-width 优化大屏显示，让布局在不同设备自然适配。
在使用 CSS Grid 实现响应式两列布局时，grid-template-columns 是关键属性。它能根据容器宽度自动调整列的分配，无需媒体查询也能实现良好的适配效果。
使用 minmax() 与 fr 单位灵活分配列宽
通过 minmax() 函数结合 fr 单位，可以让一列保持最小宽度，另一列动态填充剩余空间。
- 设置主内容区为可伸缩（如 2fr），侧边栏固定最小宽度（如 minmax(200px, 1fr)）
- 当容器变窄时，侧边栏不会小于 200px，主区域自动压缩
- 代码示例：
.container {
display: grid;
grid-template-columns: minmax(200px, 1fr) 2fr;
gap: 20px;
}
利用 auto-fit 和 repeat 实现自适应多列
当希望两列在小屏下堆叠、大屏下并排时，可用 repeat(auto-fit, ...) 配合 minmax()。
- 定义最小列宽（如 300px），浏览器自动计算最多可放几列
- 屏幕足够宽时显示两列，窄时自动变为单列
- 示例代码：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
结合 max-width 控制整体布局范围
为了防止在超大屏幕上列过宽影响阅读，给容器设置 max-width 更加友好。
立即学习“前端免费学习笔记（深入）”；
- 限制最大宽度（如 1200px），居中显示
- 内部列依然保持弹性分布
- 优化视觉平衡：
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr minmax(0, 1fr);
}
基本上就这些。用好 minmax()、fr 和 auto-fit，配合合理的最小宽度设定，就能让两列布局在各种设备上自然适配，不需要写一堆媒体查询。关键是理解每个单位的行为逻辑，让浏览器帮你做决策。
