TailwindCSS 小专栏

【问题标题】：TailwindCSS small columnTailwindCSS 小专栏
【发布时间】：2022-01-12 04:14:39
【问题描述】：

如何使第二列使用所需的最少空间？

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>

【问题讨论】：

标签： css tailwind-css

【解决方案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>

【讨论】：