如何实现带内联图片的1×4响应式CSS Grid布局，保持间距与比例？

核心实现思路 #

基于现有HTML结构，通过CSS Grid实现自适应布局，固定间距并保持图片原比例：

• 网格容器设置固定间距，自动适配行列布局
• 利用auto-fit+minmax实现响应式列宽，确保空间足够时显示4列，不足时自动换行
• 给图片容器设置固定宽高比，图片自适应填充避免变形

完整CSS代码 #

.grid-container {
  display: grid;
  /* 全局固定10px间距 */
  gap: 10px;
  /* 响应式列配置：最多4列，列宽自适应 */
  grid-template-columns: repeat(auto-fit, minmax(calc((100% - 3 * 10px) / 4), 1fr));
}

.grid-item {
  /* 匹配678×399的宽高比 */
  aspect-ratio: 678 / 399;
  overflow: hidden;
}

.grid-item img {
  width: 100%;
  height: 100%;
  /* 保持图片比例填充容器，裁剪超出部分 */
  object-fit: cover;
}

关键细节说明 #

1. 固定间距：gap: 10px直接定义网格项目间的行列间距，所有屏幕尺寸下保持一致，无需媒体查询调整。
2. 响应式列布局：
   • auto-fit会根据容器宽度自动调整列数，当容器宽度不足以容纳4个最小宽度的列时，自动换行。
   • calc((100% - 3 * 10px)/4)计算出4列刚好填满容器时的最小列宽（减去3个列间距），确保空间充足时始终显示4列。
3. 图片比例控制：
   • aspect-ratio: 678 / 399给图片容器设置固定宽高比，保证容器始终符合图片原比例。
   • object-fit: cover让图片自适应填充容器，既保持比例又不会拉伸，若需完整显示图片可改为object-fit: contain（会出现留白）。

为什么之前的方案会错乱 #

手动设置grid-column/grid-row属于静态布局配置，没有自适应逻辑，当屏幕尺寸变化时，无法自动调整列数和项目位置，导致布局溢出或变形。而auto-fit+minmax的组合是动态自适应的，能根据容器宽度自动调整布局结构。

内容的提问来源于stack exchange，提问作者Kirk Ross