如果缺少某些 div，如何填充网格行？

Question

我正在使用 tailwindcss 和这个 html：

回复：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>

第二个 div 有时可能会丢失。

我希望第三个 div 填充该行（与第一个一起），就好像它有 class“col-span-8”一样。

我该如何解决？

Answer 1

您可以将[&:nth-child(3n-1)]:last:col-span-8添加到第三个 div，因此当它是第二个和最后一个 div 时，它将垃圾邮件 8 列。

 <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>