带 tailwindcss 的特殊网格布局

Question

我想创建这种布局：

需要布局

我想使用流行的实用CSS框架“Tailwindcss”来实现这一点。有人知道如何进行吗？任何方向都会帮助我。

我确信这种结构是可能的，但我找不到任何东西。

此外，数据会从数据库中提取出来，并按照图中的编号顺序到达。

非常感谢您抽出时间！

Answer 1

自 2020 年 2 月和 Tailwind CSS v1.2 以来，完成这项任务变得异常简单:)

<div class="grid grid-cols-4 grid-rows-3">
  <div>1</div>
  <div>2</div>
  <div class="row-span-2 col-span-2">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

酷吧？

2023 年更新

仍然工作正常：https://play.tai​​lwindcss.com/q4RB94MPb8