Search code examples
cssreactjstailwind-csscss-grid

Automatically position Grid elements

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

<div class="grid grid-flow-dense grid-cols-6 grid-rows-6 gap-4">
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
</div>

Grid property grid-auto-flow: dense; doesn't work as expected. What can I use to replace element 1 with 2 and 3?

enter image description here

Take into consideration this is a react project, and the rectangles are photos taken from instagram api, so grid-area wouldn't work I think (not scalable enough).

Solution 

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

<div class="grid grid-flow-dense grid-cols-6 grid-rows-6 gap-4">
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
  <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"></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"></span>
  <span class="aspect-square h-full w-full bg-red-500 [&:nth-child(3n+3)]:col-span-2 [&:nth-child(3n+3)]:row-span-2"></span>
</div>

    You should use col-start-[index] in 2nd, 3rd elements.

      <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} is utility to make an element start at the nth grid line.