在 tailwindcss 中指定网格列/行大小答案

【问题标题】：Specifying grid column/row size in tailwindcss在 tailwindcss 中指定网格列/行大小
【发布时间】：2022-10-22 18:52:08
【问题描述】：

我想创建一个带有顺风 css 的网格，其中第一列非常窄，第二列非常宽。通常我发现顺风文档非常直观，但我不理解这个。使用grid-cols-{n} 我可以创建大小相同的列，但我不明白如何制作不同大小的列。我该怎么办？

【问题讨论】：

标签： tailwind-css

【解决方案1】：

如果您想创建具有不同宽度的列，那么它将是一个隐式创建的网格。

<div class="p-5 bg-slate-200">
  <div class="grid grid-flow-col auto-cols-max gap-x-5">
    <div class="bg-white w-20">Hello 1</div>
    <div class="bg-white w-40">Hello 2</div>
    <div class="bg-white">Hello 3</div>
  </div>
</div>

https://play.tailwindcss.com/7XjBZDzwml

这是此处的相关文档： https://tailwindcss.com/docs/grid-auto-columns

它还解释了如何在需要时自定义主题。

【讨论】：

【解决方案2】：

这是一个 2 列网格的示例，其中第一列很窄，而第二列则不是：

<div class="grid grid-cols-[max-content_1fr] gap-x-4">
  <div class="bg-red-200 p-4">Column 1</div>
  <div class="bg-green-200 p-4">Column 2</div>
</div>

顺风玩儿：https://play.tailwindcss.com/QBbWFW8vU8

我假设这不是你想要的，因为你的问题不是 100% 清楚的。所以这是一个使用 12 列网格的不同示例，您可以跨越多个列来实现您所要求的内容：

  <div class="grid grid-cols-12 gap-x-4 text-center">
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4 col-span-2">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4 col-span-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
    <div class="bg-slate-400 p-4">Col</div>
  </div>

顺风玩儿：https://play.tailwindcss.com/XtUOu2cDD9

最后，你也可以这样做：

<div class="grid grid-cols-12 gap-x-4 text-center">
  <div class="bg-slate-400 p-4 col-span-4">Col</div>
  <div class="bg-slate-400 p-4 col-span-8">Col</div>
</div>

顺风玩儿：https://play.tailwindcss.com/bAnPhCdNfc

【讨论】：

【解决方案3】：

最后我这样做的方式是：

grid grid-cols-[2rem,8fr]

它创建了一个有 2 列的网格，第一个 2rems 宽，第二个 8fr 宽

【讨论】：