时间戳

首页 > 解决方案 > 顺风 grid_template_columns

tailwind-css - 顺风 grid_template_columns

问题描述

我们如何在 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

解决方案

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

推荐阅读