主页 / coding / 问题 / 77181779
Accepted
Ryan
Asked: 2023-09-27 00:18:00 +0800 CST

是否可以使用 Tailwind 创建响应式网格（在适当时换行到新行的动态列数）？

  • 772

https://play.tai​​lwindcss.com/gUoOBmaNxj是我的尝试：

<div class="w-96 border-2 border-red-500">
  <div class="grid auto-cols-max grid-flow-col gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

但您可以看到它只创建了 1 行并且没有换行。

网格

我不明白 Tailwind 网格文档（例如https://tailwindcss.com/docs/grid-auto-columns）。

红框容器代表屏幕宽度。

我希望人们能够调整屏幕大小并调整网格。

但我不想使用像sm:and 这样的断点md:并为每个断点指定一些列。

html

1 个回答

  1. Best Answer

    考虑申请grid-template-columns: repeat(auto-fill, <size>)或grid-template-columns: repeat(auto-fit, <size>)通过grid-cols-*课程。这<size>将取决于您，因为您尚未指定列大小的任何规范。这是一个示例5rem：

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="w-96 border-2 border-red-500">
  <div class="grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

<div class="border-2 border-red-500">
  <div class="grid grid-cols-[repeat(auto-fill,5rem)] gap-2 border-2 border-black">
    <div class="w-20 bg-blue-500 p-4">1</div>
    <div class="w-20 bg-green-500 p-4">2 this one is taller</div>
    <div class="w-20 bg-red-500 p-4">3</div>
    <div class="w-20 bg-yellow-500 p-4">4</div>
    <div class="w-20 bg-purple-500 p-4">5</div>
    <div class="w-20 bg-pink-500 p-4">6</div>
    <div class="w-20 bg-indigo-500 p-4">7</div>
    <div class="w-20 bg-teal-500 p-4">8</div>
    <div class="w-20 bg-cyan-500 p-4">9</div>
    <div class="w-20 bg-gray-500 p-4">10</div>
  </div>
</div>

    • 1

相关问题