如何在Tailwind中实现与父网格列宽一致的嵌套列布局

方案1：使用subgrid（推荐，Tailwind v3.1及以上版本支持） #

subgrid是CSS Grid专门为嵌套网格和父级网格轨道对齐设计的特性，无需手动计算宽度即可实现完全对齐，是当前场景的最优解。
修改后的代码如下：

<link href="https://unpkg.com/tailwindcss@^3/dist/tailwind.min.css" rel="stylesheet"/>

<div class="container w-full grid grid-cols-12 mx-auto grid-parent">
  <div class="col-span-3 bg-blue-500 h-screen"></div>
  <!-- 给占用父网格9列的外层容器添加grid属性 -->
  <div class="col-span-9 h-screen bg-red-500 grid">
    <!-- 子网格使用subgrid继承父级的列轨道，同时声明自身占用父网格的9列 -->
    <div class="grid grid-cols-subgrid grid-child col-span-9">
      <!-- 此处的col-span-3会直接匹配父网格的3列宽度 -->
      <div class="col-span-3 bg-purple-500 h-20"></div>
    </div>
  </div>
</div>

方案2：手动调整子网格列数（兼容旧版Tailwind） #

如果你使用的Tailwind版本不支持subgrid，可以直接将内部子网格的列数调整为9，和外层容器占用的父网格列数保持一致，此时子网格每列宽度会自动和父网格列宽相等。
修改后的代码如下：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="container w-full grid grid-cols-12 mx-auto grid-parent">
  <div class="col-span-3 bg-blue-500 h-screen"></div>
  <div class="col-span-9 h-screen bg-red-500">
    <!-- 子网格设为9列，每列宽度与父网格列宽对齐 -->
    <div class="grid grid-cols-9 grid-child">
      <!-- 此处的col-span-3与父网格的col-span-3宽度完全一致 -->
      <div class="col-span-3 bg-purple-500 h-20"></div>
    </div>
  </div>
</div>

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