grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，自动均分容器宽度；配合 gap 控制间距、grid-column 自由定位内容、媒体查询切换单列，并通过 align-items: start 和内边距优化对齐与响应。
用 grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，无需计算像素或百分比，自动均分容器空间。
只需在容器上设置 display: grid 和两列等比定义，浏览器会自动将可用宽度平分给左右两列：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px; /* 列间间距 */
}此时左列放图、右列放文（或反之），天然对齐、响应自然。注意：1fr 表示“剩余空间的 1 份”，两个 1fr 就是各占一半。
Grid 允许内容自由放置，不必按 HTML 顺序排列。比如希望图片在右、文字在左，可配合 grid-column 控制：
grid-column: 2; → 显示在第二列grid-column: 1; → 显示在第一列这样语义结构和视觉顺序可以分离，利于 SEO 和可访问性。
双列在手机上拥挤，建议在小屏下退回单列流式布局：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}这样既保持桌面端的并排效果，又保障移动端阅读体验，无需额外 JS 或复杂断点。
若图片和文字块高度差异大，可加 align-items: start 防止默认拉伸；文字区域建议用 padding 而非 margin 控制内部留白，避免影响 Grid 的轨道计算：
align-items: start;
width: 100%; height: auto; 保证响应缩放基本上就这些 —— 1fr 1fr 是双列的起点，灵活、轻量、易维护。
以上就是Grid网格布局如何实现图文双列布局_使用1fr 1fr快速创建等分结构的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
501
收藏
