如何用Flexbox实现高度不一致的图片画廊（替代Grid效果）

要实现你想要的对齐效果，调整Flex容器的方向和项目尺寸即可，修改后的CSS代码如下：

.container { /* 修复原代码中漏写的类选择器前缀 */
  width: 90%;
  overflow: hidden;
  margin: 0 auto;
  max-width: 1200px;
  padding: 80px 0;
}

.projects {
  background-color: #f2f2f2;
  overflow: hidden;
  margin-bottom: 500px;
}

.projects__grid {
  display: flex;
  flex-direction: column; /* 改为纵向排列，允许换行 */
  flex-wrap: wrap;
  align-content: space-between;
  height: 550px;
  background-color: aqua;
}

.projects__item {
  width: 32.8%;
  height: calc(50% - 10px); /* 计算高度，留出间距 */
  margin-bottom: 20px;
}

.projects__item--first {
  width: 65.6%; /* 占据两列宽度，对应两个小项目的宽度之和 */
  height: 100%;
  margin-bottom: 0;
}

.projects__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

修改说明 #

• 把Flex容器的flex-direction设为column，让元素纵向排列并自动换行，这样左侧大图片能占据整个容器高度，右侧小图片分成上下两行填充剩余空间。
• 调整大项目宽度为65.6%（两个小项目宽度之和，预留出间距），高度设为100%，确保填满左侧区域。
• 小项目用calc(50% - 10px)计算高度，减去间距后，上下两个小项目刚好填满右侧的高度空间。
• 修复了原CSS中.container选择器漏写.的问题，保证容器样式正常生效。

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