Span Multiple Grid Cells In Tailwind CSS Grid - css

Question

I am using Tailwind CSS and am trying to build a grid that certain cell contents span multiple cells while other items stay in the single cell. In the code below, I try to show what I am trying to accomplish. I know my col-span-2 class is not doing anything, but I put it there to indicate what I wish I could do. I want all cells to be the same width (I just want some cell content to span over the dividers). Do I need some sort of overlay logic?
Any help is appreciated.
Thanks!
<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

You will need to write your own CSS for this. To span 2 column, use width:200% and don't forget to account for the padding you are using:
.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>