Grid网格布局如何实现图文双列布局_使用1fr 1fr快速创建等分结构

新闻中心 NEWS CENTER

2025-12-16

浏览次数：次

grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，自动均分容器宽度；配合 gap 控制间距、grid-column 自由定位内容、媒体查询切换单列，并通过 align-items: start 和内边距优化对齐与响应。

grid网格布局如何实现图文双列布局_使用1fr 1fr快速创建等分结构

用 grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，无需计算像素或百分比，自动均分容器空间。

只需在容器上设置 display: grid 和两列等比定义，浏览器会自动将可用宽度平分给左右两列：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 列间间距 */
}

此时左列放图、右列放文（或反之），天然对齐、响应自然。注意：1fr 表示“剩余空间的 1 份”，两个 1fr 就是各占一半。

Grid 允许内容自由放置，不必按 HTML 顺序排列。比如希望图片在右、文字在左，可配合 grid-column 控制：

这样语义结构和视觉顺序可以分离，利于 SEO 和可访问性。

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

86 查看详情 FashionLabs

双列在手机上拥挤，建议在小屏下退回单列流式布局：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

这样既保持桌面端的并排效果，又保障移动端阅读体验，无需额外 JS 或复杂断点。

若图片和文字块高度差异大，可加 align-items: start 防止默认拉伸；文字区域建议用 padding 而非 margin 控制内部留白，避免影响 Grid 的轨道计算：

基本上就这些 —— 1fr 1fr 是双列的起点，灵活、轻量、易维护。

以上就是Grid网格布局如何实现图文双列布局_使用1fr 1fr快速创建等分结构的详细内容，更多请关注其它相关文章！