how to stop grid cells to stretching horizontally in tailwindcss?

user_14766558 0
Viewed 380

I don't know how do I explain but I want my grid to perfectly fit this blackboard and even when I change the size of the window it should stay with equal spacing and with their respective hieght and width
this is my code https://play.tailwindcss.com/KBxI7wvDJA

this is how i want

enter image description here

when i reduce the window size it become like this
enter image description here

tailwind-css css
1 Answers

If you set the container's width, then the grid won't re-size and gaps wont' change.

From the devtools I see the container width as 464px. So you can apply min-w-[464px] to the container.

Demo: https://play.tailwindcss.com/JXqBPk45Mj

<div class="relative">
  <div class="board h-screen"></div>
  <--                -->
  <div class="min-w-[464px] grid grid-cols-3 gap-x-28 gap-y-12 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
    <div class="h-20 w-20 bg-pink-400 text-center"></div>
  </div>
</div>
user_40350
Related