TailwindCSS 小专栏

Question

如何使第二列使用所需的最小量 space？

https://play.tailwindcss.com/tYdbqCSfoh?size=540x720

我有这个：

但我想要这个：

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="relative bg-gray-600">
    <div class="max-w-full m-2">
      <div class="grid gap-2 grid-flow-col bg-blue-300">
        <div class="bg-green-200">sdf</div>
        <div class="bg-red-200">sdf</div>
      </div>
    </div>
  </div>
</div>

Answer 1

只需添加grid-cols-1

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

<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center relative overflow-hidden sm:py-12">
  <div class="relative bg-gray-600">
    <div class="max-w-full m-2">
      <div class="grid grid-cols-1 gap-2  grid-flow-col bg-blue-300">
        <div class="bg-green-200">sdf</div>
        <div class="bg-red-200">sdf</div>
      </div>
    </div>
  </div>
</div>

TailwindCSS 小专栏

TailwindCSS small column

css

tailwind-css