无法让顺风网格的列按照我想要的方式运行

Question

我正在尝试使用以下代码创建一个类似 Bento 的网格：

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>

我希望04列占据10行，但它永远不会像其他块那样扩展。我尝试过调整该列的高度值，但似乎没有任何效果。

这里有一个相同的顺风播放链接：https://play.tailwindcss.com/45q49qt5iQ

如何使第 4 列完全占据网格中的可用空间？

Answer 1

您似乎误解或没有阅读grid-row-start/end

类集的文档 - 您添加了row-span-10

，也许假设此类默认存在。但是，如果没有自定义配置，

row-span-<number>

 类名称集的范围仅从 

1

 到 

6

。

要解决此问题，您可以考虑

使用任意值类，row-[span_10/span_10]

：

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-[span_10/span_10] col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>

或者

修改您的 Tailwind 配置，将 row-span-10

 作为可能的类：

tailwind.config = {
  theme: {
    extend: {
      gridRow: {
        'span-10': 'span 10 / span 10',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.3.5"></script>

<div class="grid-rows-12 grid grid-cols-12 gap-4 [&>*]:rounded-sm [&>*]:bg-fuchsia-600">
  <div class="col-span-6 col-start-1 row-span-6 row-start-1">01</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-1">02</div>
  <div class="col-span-3 col-start-7 row-span-3 row-start-4">03</div>
  <div class="row-span-10 col-span-3 col-start-10 row-start-1">04</div>
  <div class="col-span-4 col-start-1 row-span-6 row-start-7">05</div>
  <div class="col-span-5 col-start-5 row-span-4 row-start-7">06</div>
  <div class="row-start-10 col-span-8 col-start-5 row-span-2">07</div>
</div>