如何实现2x1x2x1x2格式的图片网格布局？

解决方案代码 #

HTML

<div class="container-images">
  <div class="image-item">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1459800606415-5B8BDTCZ866H7OTNQMYL/portrait-black.jpg?format=1500w" alt="Lion portrait" />
  </div>
  <div class="image-item">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452896039354-F8P5FPCM3V9HMWHWZ0FE/main.jpg?format=1000w" alt="Water scene" />
  </div>
  <div class="image-item full-width">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1456767403805-KN8Z62OADRLLPKN8YA4P/nytimes-main.jpg?format=1000w" alt="Pedestal" />
  </div>
  <div class="image-item">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1453940592760-5OWKFJCJKG133RHSDOMK/main.jpg?format=1000w" alt="Berlin scene" />
  </div>
  <div class="image-item">
    <img src="https://images.squarespace-cdn.com/content/v1/563bdd38e4b0283238934c89/1452634113588-M32DA4VU1QCEBLOKWCBV/main.jpg?format=1500w" alt="Dome" />
  </div>
</div>

CSS

.container-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 创建两列等宽布局 */
  gap: 1rem; /* 图片间的间距，可按需调整 */
  margin: 1rem 0; /* 可选：给网格上下添加间距 */
}

.full-width {
  grid-column: 1 / -1; /* 让该元素横跨两列 */
  display: flex;
  justify-content: center; /* 水平居中图片 */
}

img {
  width: 100%; /* 图片填满所在网格单元 */
  height: auto; /* 保持图片比例不变 */
}

关键修复与说明 #

• 移除重复ID: HTML中ID必须唯一，因此将重复的id="img-layout"替换为通用类image-item。
• 改用CSS Grid: Grid是实现这种跨列布局的最佳工具，grid-template-columns: repeat(2, 1fr)直接定义两列等宽网格。
• 全宽元素处理: full-width类通过grid-column: 1 / -1实现跨列，并用flexbox让图片居中。
• 响应式图片: width: 100%和height: auto确保图片自适应容器且不扭曲。
• 清除冲突布局: 删除原代码中互相干扰的float和flex属性，避免布局混乱。

若需要调整图片间距，修改.container-images中的gap值即可；如果不想让全宽图片占满容器宽度，可给其添加max-width属性（如max-width: 80%）。

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