2

I want a divider to go between each of the columns of my grid like this:enter image description here

The divider should always be in the center of any two columns and should not be displayed on the outer edges of the grid. Note that the number of columns will change according to screen size. Any ideas how to do this?

Here is my code: https://play.tailwindcss.com/ATXYuNgHg9

clenn14
  • 31
  • 4

1 Answers1

1

You can try using a pseudo-element for the first red blocks, we make height with very long with vh unit and hide it using the overflow property on the parent element.

<script src="https://cdn.tailwindcss.com"></script>
<div class="absolute inset-0 justify-center p-32">
  <div class="grid gap-x-8 gap-y-3 overflow-hidden xs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    <div class="relative w-30 h-10 bg-red-600 sm:after:content-[''] sm:after:absolute sm:after:w-[3px] sm:after:min-h-[500vh] sm:after:bg-black sm:after:right-[-1rem]"></div>
    <div class="relative w-30 h-10 bg-red-600 lg:after:content-[''] lg:after:absolute lg:after:w-[3px] lg:after:min-h-[500vh] lg:after:bg-black lg:after:right-[-1rem]"></div>
    <div class="relative w-30 h-10 bg-red-600 xl:after:content-[''] xl:after:absolute xl:after:w-[3px] xl:after:min-h-[500vh] xl:after:bg-black xl:after:right-[-1rem]"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
    <div class="w-30 h-10 bg-red-600"></div>
  </div>
</div>
Anton
  • 8,058
  • 1
  • 9
  • 27