如何实现图片占据剩余高度的布局？尝试Flex+flex-wrap:wrap无效

flex是一维布局，换行后每行元素只会在当前行空间内排列，没法让下方行的元素跨到上方行的空白区域。要实现你要的这种布局，用CSS Grid更合适——它是二维布局系统，能直接控制元素在行列上的位置和跨度。

下面是实现代码：

HTML结构 #

<div class="image-grid">
  <div class="image-item large">
    <img src="你的图片地址" alt="第一行图片">
  </div>
  <div class="image-item">
    <img src="你的图片地址" alt="第二行图片1">
  </div>
  <div class="image-item">
    <img src="你的图片地址" alt="第二行图片2">
  </div>
  <div class="image-item">
    <img src="你的图片地址" alt="第三行图片1">
  </div>
  <div class="image-item">
    <img src="你的图片地址" alt="第三行图片2">
  </div>
</div>

CSS样式 #

.image-grid {
  display: grid;
  /* 把容器分成3等宽列 */
  grid-template-columns: repeat(3, 1fr);
  /* 设置行列间距 */
  gap: 10px;
}

.image-item.large {
  /* 让第一个图片占据2行高度 */
  grid-row: span 2;
}

.image-item img {
  width: 100%;
  height: 100%;
  /* 保持图片比例，裁剪多余部分避免变形 */
  object-fit: cover;
}

关键逻辑：

• grid-template-columns: repeat(3, 1fr) 定义了3列均分容器宽度
• grid-row: span 2 让首行图片占2行高度，右侧空白区域会自动被下方的图片填充，正好实现第二、三行图片延伸至第一行右侧的效果

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