我正在使用顺风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>
您需要为此编写自己的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>