使用 minmax()、fr 和 auto-fit 可实现无需媒体查询的响应式两列布局，通过 grid-template-columns 灵活分配列宽，结合 max-width 优化大屏显示，让布局在不同设备自然适配。
在使用 CSS Grid 实现响应式两列布局时，grid-template-columns 是关键属性。它能根据容器宽度自动调整列的分配，无需媒体查询也能实现良好的适配效果。
通过 minmax() 函数结合 fr 单位，可以让一列保持最小宽度，另一列动态填充剩余空间。
.container {
display: grid;
grid-template-columns: minmax(200px, 1fr) 2fr;
gap: 20px;
}
当希望两列在小屏下堆叠、大屏下并排时，可用 repeat(auto-fit, ...) 配合 minmax()。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
为了防止在超大屏幕上列过宽影响阅读，给容器设置 max-width 更加友好。
立即学习“前端免费学习笔记（深入）”；
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr minmax(0, 1fr);
}
基本上就这些。用好 minmax()、fr 和 auto-fit，配合合理的最小宽度设定，就能让两列布局在各种设备上自然适配，不需要写一堆媒体查询。关键是理解每个单位的行为逻辑，让浏览器帮你做决策。
以上就是CSS Grid如何实现响应式两列布局_grid-template-columns自动适配宽度的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
552
收藏
