tailwind-css - Tailwind grid_template_columns

Question

我们如何在 Tailwind 中设置单个列的宽度？
例如在 Vanilla 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

这很简单。在网格 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>