Search code examples
cssgridtailwind-css

Tailwind bento layout can't let elements share the same column

I'm trying to make element 4 and 5 share the same column and since both span row instead of the total max which is 2 they will be on top of each other while keeping 6 and 7 next to each other.

How can I achieve that?

https://play.tailwindcss.com/iv7mif3xrD

enter image description here

Solution

  • Give the 4 and 5 the row-start so they start at the exact row you want like this:

    <div class="grid grid-cols-5 grid-rows-2 gap-1 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-3 row-span-2">01</div>
  <div class="col-span-1 row-span-2">02</div>
  <div class="col-span-1 row-span-2">03</div>

    <div class="col-span-2 row-span-1 row-start-3">04</div>
  <div class="col-span-2 row-span-1 row-start-4">05</div>
  <div class="col-span-2 row-span-2 ">06</div>
  <div class="col-span-2 row-span-1">07</div>
</div>

    enter image description here