如何阻止网格单元在tailwindcss中水平拉伸？

Posted 2023-03-05

【中文标题】如何阻止网格单元在tailwindcss中水平拉伸？

【英文标题】：how to stop grid cells to stretching horizontally in tailwindcss?

【发布时间】：2022-01-23 23:47:29

【问题描述】：

我不知道该如何解释，但我希望我的网格完全适合这个黑板，即使我更改了窗口的大小，它也应该保持相同的间距以及它们各自的高度和宽度 这是我的代码https://play.tailwindcss.com/KBxI7wvDJA

这就是我想要的

当我减小窗口大小时，它变成这样

【参考方案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>