如何让div跨2行？不修改元素顺序用Grid/Bootstrap/Flex可行吗？

目标布局：左侧元素A垂直占据两行空间，右侧上下排列元素B和C，且保持HTML结构为父容器下依次是A、B、C的顺序（不修改元素顺序）。

1. CSS Grid 实现 #

完全可以实现，这是最适配该需求的方案，代码示例：

<div style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: 200px;">
  <div style="grid-row: span 2; background: #eee;">A</div>
  <div style="background: #ddd;">B</div>
  <div style="background: #ccc;">C</div>
</div>

• 父容器通过display: grid启用网格布局，定义2列2行的网格结构
• 元素A通过grid-row: span 2设置垂直跨占两行，直接达成目标布局

2. Bootstrap 实现 #

使用Bootstrap 5及以上版本的网格工具类即可实现，代码示例：

<div class="grid grid-cols-2 grid-rows-2 gap-2" style="height: 200px;">
  <div class="bg-light grid-row-span-2">A</div>
  <div class="bg-secondary bg-opacity-25">B</div>
  <div class="bg-secondary bg-opacity-50">C</div>
</div>

• Bootstrap 5提供grid、grid-cols-2、grid-rows-2等类快速定义网格结构
• grid-row-span-2类让元素A跨占两行，无需额外自定义CSS即可实现效果

3. Flex 布局实现 #

不修改元素结构的前提下，单纯依靠Flex无法实现该布局。

Flex是一维布局系统，仅能处理单行或单列的排列逻辑，无法实现元素跨多行的二维网格效果。如果不添加额外嵌套容器（比如把B和C包裹到一个子容器里），仅靠现有A、B、C三个同级元素，Flex无法让A垂直占据两行同时让B、C在右侧上下排列。

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