Span Multiple Grid Cells In Tailwind CSS Grid

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>

cell content to span over the dividers I am finding it hard to understand. Can you please rephrase it or add a sample image for better understanding. — Digvijay
– Digvijay, Commented Feb 1, 2021 at 4:56

Temani Afif · Accepted Answer · 2021-02-01 09:00:24Z

0

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>

answered Feb 1, 2021 at 9:00

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John Over a year ago

Fantastic. Thank you.

tmwilliamlin168 Over a year ago

@John If your question was answered be sure to mark this answer as 'accepted'.

Collectives™ on Stack Overflow

Span Multiple Grid Cells In Tailwind CSS Grid

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related