如何使用顺风创建嵌套列？

Question

我正在使用顺风创建 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>

Answer 1

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

如何使用顺风创建嵌套列？

How to create nested column with tailwind?

html

css

tailwind-css