Bootstrap5如何实现含1个跨行大列的2x2网格布局？

你可以通过嵌套Bootstrap网格的方式实现需求，全程使用Bootstrap原生类即可，无需额外自定义CSS：

• 外层row下只放两个平级的列：左侧占col-md-9，右侧占col-md
• 左侧列内部再嵌套一个垂直排列的row，用来放上下排列的Col1和Col3
• 因为Bootstrap5的网格默认是Flex布局，右侧列高度会自动拉伸，和左侧两列总高度保持一致

如果需要调整Col1、Col3的高度分配比例，可以给对应列加flex-grow-*类控制，比如要Col3占满左侧剩余高度，给Col3加flex-grow-1即可。

修正后代码 #

<!--Static Content-->
<div class="" id="static-content-container" style="background-color: yellow;">
  <div class="row">
    <!-- 左侧大列，包裹Col1和Col3 -->
    <div class="col-md-9">
      <div class="row flex-column h-100">
        <div class="col">
          <p>Column 1</p>
        </div>
        <div class="col">
          <p>Column 3</p>
        </div>
      </div>
    </div>
    <!-- 右侧跨行列 -->
    <div class="col-md">
      <p>Column 2</p>
    </div>
  </div>
</div>
<!--/Static Content-->

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