Search code examples
tailwind-css

Tailwind, why is col-span-3 broken in a 3-col grid?

So I want to achieve this:

ROW > COL1, COL2, COL3

ROW > COL4--COL4--COL4

3 on top, 1 full wide under that 3.

but when I do the col-span-3, it looks bad, it goes from start to the middle of the 3rd col (even if I remove the gap, it still does this thing).

Example is here:

https://play.tailwindcss.com/KoLUkuxT3o

I'll also include the example image, in case screen-size would be a problem: https://imgur.com/a/KaENQh0

Solution

  • Consider removing the container class from the grid element. The max-width property in Tailwind's container CSS rules is what is preventing the element from spanning the full width of the 3 columns:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="grid grid-cols-3 gap-4">
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">01</div>
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">02</div>
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">03</div>
  <div class="col-span-3 flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">04</div>
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">05</div>
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">06</div>
  <div class="container flex h-auto flex-col rounded-lg bg-gray-600 p-2 text-white shadow">07</div>
</div>