如何使用Tailwind实现网格布局：两元素共格垂直放，一元素独占一格

你可以通过CSS Grid搭配Flexbox快速实现该布局，核心思路是用Grid划分出两个独立单元格，其中一个单元格直接放置单个元素，另一个单元格内部用Flex垂直排列两个子元素。以下是具体实现代码：

左右布局（左侧单个元素，右侧垂直双元素） #

<div class="grid grid-cols-2 gap-4 p-4">
  <!-- 单独占据网格单元格的元素 -->
  <div class="bg-blue-500 h-64 rounded-lg flex items-center justify-center text-white font-bold">
    单个元素
  </div>
  
  <!-- 包含垂直双元素的网格单元格 -->
  <div class="flex flex-col gap-4">
    <div class="bg-green-500 h-32 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素1
    </div>
    <div class="bg-yellow-500 h-32 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素2
    </div>
  </div>
</div>

上下布局（上方单个元素，下方垂直双元素） #

如果需要上下结构的布局，只需修改外层Grid的行列配置：

<div class="grid grid-rows-2 gap-4 p-4">
  <div class="bg-blue-500 h-32 rounded-lg flex items-center justify-center text-white font-bold">
    单个元素
  </div>
  
  <div class="flex flex-col gap-4">
    <div class="bg-green-500 h-32 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素1
    </div>
    <div class="bg-yellow-500 h-32 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素2
    </div>
  </div>
</div>

让垂直元素撑满单元格高度 #

如果需要右侧/下方的两个垂直元素自动填满所在单元格的高度，可以给Flex容器添加h-full，并给子元素添加flex-1：

<div class="grid grid-cols-2 gap-4 p-4 h-96">
  <div class="bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold">
    单个元素
  </div>
  
  <div class="flex flex-col gap-4 h-full">
    <div class="bg-green-500 flex-1 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素1
    </div>
    <div class="bg-yellow-500 flex-1 rounded-lg flex items-center justify-center text-white font-bold">
      垂直元素2
    </div>
  </div>
</div>

代码说明 #

• grid grid-cols-2/grid grid-rows-2：创建两列/两行的网格布局；
• gap-4：设置网格单元格之间的间距；
• flex flex-col：让容器内的元素垂直排列；
• flex-1：让子元素均分容器的可用空间，实现高度自适应。

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