如何用顺风创建嵌套列？答案

【问题标题】：How to create nested column with tailwind?如何用顺风创建嵌套列？
【发布时间】：2022-01-11 10:28:40
【问题描述】：

我正在使用 tailwind 创建 12 列网格布局。

我想在 grid-child 中创建一个嵌套的 3/12 列，其宽度与父级 grid-parent 处的 col-span-3 相等。

我创建了另一个网格，但这个 grid-child 的 3/12 列小于 grid-parent。我的意思是grid-child 的 12 列的宽度 == grid-parent 的 9 列的宽度。

如果我删除了 div grid-child，那么 col-span-3 将不起作用。

那么我该如何处理呢？

<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">
    <div class="grid grid-cols-12 grid-child">
      <div class="col-span-3 bg-purple-500 h-20"></div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

我认为你不能在grid-child 中使用grid-cols-12，因为你从12 列中取出了3 列，那么右侧就只剩下9 列了。所以9列中的12列不等于原来的12列。

【讨论】：