顺风 grid_template_columns答案

【问题标题】：Tailwind grid_template_columns顺风 grid_template_columns
【发布时间】：2021-06-07 21:50:29
【问题描述】：

我们如何在 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 中，如果将宽度应用于列，则会破坏网格。

【问题讨论】：

标签： tailwind-css

【解决方案1】：

这对我有用

<div class="grid grid-cols-6 gap-4">
   <div class="col-start-2 col-span-4">01</div>
   <div class="col-start-1 col-end-3">02</div>
</div>

【讨论】：

【解决方案2】：

基本上，tailwindcss 的作用是重复（n，1fr），这就是为什么我们其他 cmets 的朋友告诉你先制作 10 个网格，然后再制作 colspans。

我在这种情况下多次发现自己，当我只需要 2 列时，在您的情况下为 80% 20%，我在 <style jsx> 中进行操作。就响应能力而言，这将变得更加容易。

也许在未来借助顺风 JIT，我们可以做到这一点： Tailwind grid-template-columns

但现在我们不能，也许我们可以问他们，你愿意加入吗？

【讨论】：

使用 JIT 编译器的自定义网格是文档中明确指出的一个用例：tailwindcss.com/docs/just-in-time-mode#arbitrary-value-supporthtml  <div class="grid-cols-[1fr,700px,2fr]">  </div>

【解决方案3】：

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

顺风很简单（见Grid column） 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>

【讨论】：

【解决方案4】：

要设置列宽，您可以使用Grid Column Start / End 或简单直接的Width

working demo on tailwind play

<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>

【讨论】：