在顺风CSS网格中跨多个网格单元格

Question

我正在使用顺风CSS，并试图建立一个网格，使某些单元格内容跨越多个单元格，而其他项目留在单个单元格。在下面的代码中，我试图展示我正在尝试完成的事情。我知道我的col-span-2班什么也没做，但我把它放在那里是为了表明我希望我能做什么。我想让所有的单元格都是相同的宽度（我只想让一些单元格内容跨越分隔线）。我需要某种覆盖逻辑吗？

感谢任何帮助。

谢谢！

<div id=container class="m-auto p-2">
  <div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
    <div id=cell1 class="px-4 h-24">
      Cell 1<br />
      <div id=thingThatSpansTwoCells class="h-4 bg-green-700 text-white col-span-2">Spans 2 Cells</div>
    </div>
    <div id=cell2 class="px-4 h-24">Cell 2</div>
    <div id=cell3 class="px-4 h-24">Cell 3</div>
  </div>
</div>

Answer 1

您需要为此编写自己的CSS。若要跨越2列，请使用width：200%并且不要忘记说明您正在使用的填充：

null

.w-200 {
  width:calc(200% + 3rem);
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div id=container class="m-auto p-2">
  <div id=theGrid class="grid grid-cols-3 divide-x divide-gray-600">
    <div id=cell1 class="px-4 h-24">
      Cell 1<br />
      <div id=thingThatSpansTwoCells class="bg-green-700 text-white w-200">Spans 2 Cells</div>
    </div>
    <div id=cell2 class="px-4 h-24">Cell 2</div>
    <div id=cell3 class="px-4 h-24">Cell 3</div>
  </div>
</div>