css - 如何阻止网格单元格在 tailwindcss 中水平拉伸(stretch)？

Question

我不知道该怎么解释，但我希望我的网格能够完美地适应这个黑板，即使我改变了窗口的大小时，它也应该保持相等的间距以及它们各自的高度和宽度
这是我的代码 https://play.tailwindcss.com/KBxI7wvDJA

这就是我想要的

当我缩小窗口尺寸时它变成这样

Answer 1

如果您设置容器的宽度，则网格不会重新调整大小，间隙也不会改变。

从 devtools 我看到容器宽度为 464px。因此，您可以将 min-w-[464px] 应用于容器。

演示: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>