我利用順風(fēng)得到了一個網(wǎng)格。當一個網(wǎng)格項目跨越兩列時，如何下推第二列中的任何項目？

之前有一個問題和答案，如果第二列中有項目，這確實有效，但重疊的項目將在它下面結(jié)束。所以在我下面的例子中，我如何讓事件3知道事件1，以便它向下移動？

這是我的網(wǎng)格代碼，演示了下面的問題——https://play.tailwindcss.com/T9qGfeJDB8

如果我對網(wǎng)格應(yīng)用一個間隙，這里有一個截圖，顯示事件1將跨越2個網(wǎng)格，但將在Tue事件3下結(jié)束。

# # #像其他事件一樣將事件1分離出來，使其位于獨立于事件2的網(wǎng)格項目中。然后應(yīng)用軸網(wǎng)-柱:span 2 / span 2。然后，為一些相鄰的元素指定一些網(wǎng)格列或網(wǎng)格行，將它們重新定位到您想要的位置:

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

<div class="grid grid-cols-8 grid-rows-3 gap-x-2 grid-flow-dense">
  <div class="flex items-center justify-center border border-gray-200 font-semibold">Locations</div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Mon</span><span class="text-sm">1</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Tue</span><span class="text-sm">2</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Wed</span><span class="text-sm">3</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Thu</span><span class="text-sm">4</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Fri</span><span class="text-sm">5</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Sat</span><span class="text-sm">6</span></div>
  <div class="flex flex-col items-center justify-center border border-gray-200 font-semibold"><span class="text-stone-400">Sun</span><span class="text-sm">7</span></div>

  <div class="flex items-center justify-center border border-gray-200 py-2 font-semibold row-span-2">Location 1</div>

  <div class="col-span-2 space-y-2 border border-gray-200 py-2">
    <div class="bg-red-100 pl-2">10am - 10am<br />Event 1</div>
  </div> 
  <div class="col-start-2 space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 2</div>
  </div>
  <div class="col-start-3 space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 3</div>
  </div>
  <div class="space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 4</div>
  </div>
  <div class="space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 5</div>
  </div>
  <div class="space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 6</div>
  </div>
  <div class="space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 7</div>
  </div>
  <div class="space-y-2 border border-gray-200 py-2">
    <div class="bg-stone-100 pl-2">6am - 1pm<br />Event 8</div>
  </div>
</div>