自动定位网格元素

Answer 1

您应该在第二、第三个元素中使用

col-start-[index]

。

  <span class="aspect-square col-start-3 h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2">[2]</span>
  <span class="aspect-square col-start-4 h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2">[3]</span>

col-start-{n}

是使元素从第

n

网格线开始的实用程序。