How to fill the grid row if some div is missing?

Question

I'm using tailwindcss and this html:

REPL: https://play.tailwindcss.com/L8McFjGBVC

<div class="grid grid-cols-12">
  <div class="col-span-4 bg-red-300">1</div>
  <div class="col-span-4 bg-green-300" v-if="showSecondDiv">2</div>
  <div class="col-span-4 bg-blue-300">3</div>
</div>

The second div can sometimes be missing.

I would like the third div to fill the row (together with the first one), as if it had class "col-span-8".

How can I fix?

Answer 1

You can add [&:nth-child(3n-1)]:last:col-span-8 to the 3rd div, so when it's the second and the last div, it will spam 8 columns.

 <script src="https://cdn.tailwindcss.com"></script> <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class="col-span-4 bg-green-300">2</div> <div class="col-span-4 [&:nth-child(3n-1)]:last:col-span-8 bg-blue-300">3</div> </div> <br> <div class="grid grid-cols-12"> <div class="col-span-4 bg-red-300">1</div> <div class="col-span-4 [&:nth-child(3n-1)]:last:col-span-8 bg-blue-300">3</div> </div>