CODEWITHSUNDEEP
gridtailwind-cssdivider
clenn14
clenn14

Reputation: 41

(TailwindCSS) How do I make a column divider in a grid

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

Upvotes: 3

Views: 4290

Answers (1)

Anton
Anton

Reputation: 8508

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>

Upvotes: 2

Related Questions