如何用display: flex;实现单元素跨两行布局？是否需用Grid？

Flex布局：能做，但有点绕 #

Flex是一维布局，本身没有跨行的原生支持，要实现单个元素占两行，得靠「视觉模拟」：

• 给容器开启flex-wrap: wrap允许换行
• 给普通元素设置固定高度，让目标元素的高度等于两行普通元素高度+间隙，再加上align-self: flex-start避免被拉伸

示例代码：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.item {
  flex: 1 1 150px; /* 空间不足时自动换行 */
  height: 80px;
  background: #eee;
}
.item.two-row {
  height: calc(80px*2 + 10px); /* 两行高度+间隙 */
  align-self: flex-start;
}

但这种方法有硬伤：高度必须写死，一旦元素内容变化（比如文字增多撑高），布局直接崩，而且只是视觉上占两行，并非真正的布局层面跨行。

Grid布局：天生适配，逻辑清晰 #

Grid是二维布局，直接支持行和列的控制，完美匹配需求：

• 用repeat(auto-fit, minmax(150px, 1fr))实现自动换行，容器空间不足时自动拆行
• 给目标元素加grid-row: span 2，直接让它占据两行空间，无需硬编码高度，会自动跟随两行的高度自适应

示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.item {
  background: #eee;
}
.item.two-row {
  grid-row: span 2;
}

这种方式灵活又好维护，元素内容变化也能自适应，绝对是首选方案。

说白了，Flex能凑合用，但Grid是专为这种跨行的自适应布局设计的，用起来更省心。

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