Tailwind grid_template_columns

Question

Tailwind 中如何设置各个列的宽度？

例如在普通 CSS 中我会

.grid-container {
  display: grid;
  grid-template-columns: 20% 80%;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
</div>

但是，在 Tailwind 中，如果将宽度应用于列，则会破坏网格。

Answer 1

有一种方法可以为列设置任意值，我知道这个问题很旧，但我想我会分享。我自己是顺风的新手，但我想也许其他人可能会发现这有帮助：

<div class="grid grid-cols-[20%_80%]">

此方法也适用于设置固定宽度：

<div class="grid grid-cols-[200px_auto]">

在此示例中，第一列的固定宽度为 200px，另一列的大小为自动。

Answer 2

这相当简单。在网格 CSS 中，您可以告诉网格的每个元素应该在哪一列或哪一行开始（请参阅grid-column-start）或结束（请参阅grid-column-end），甚至它应该跨越多少列。

使用顺风，这非常简单（参见网格列） col-start-x col-end-x col-span-x

话虽如此，在你的情况下它是（假设有 5 列网格）

<div class="grid-container grid grid-cols-5">
  <div class="item1 col-span-1">1</div>
  <div class="item2 col-span-4">2</div>
</div>

Answer 3

要设置列宽，您可以使用网格列开始/结束或简单的直接宽度

<div class="grid grid-cols-10">
  <div class="col-span-2 bg-purple-200">1</div>
  <div class="col-span-8 bg-purple-300">2</div>
</div>

<div class="flex">
  <div class="bg-indigo-200 w-1/5">1</div>
  <div class="bg-indigo-300 w-4/5">2</div>
</div>