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>

很酷吗？

Answer 2

您只能使用css grid来获得该结果，因为“ Tailwindcss”基于display: flex来工作，所以使用它很难实现该结果。请查看下面的工作代码段，希望对您有所帮助：）

.item1 { grid-area: a1; }
.item2 { grid-area: a2; }
.item3 { grid-area: a3; }
.item4 { grid-area: a4; }
.item5 { grid-area: a5; }
.item6 { grid-area: a6; }
.item7 { grid-area: a7; }
.item8 { grid-area: a8; }
.item9 { grid-area: a9; }

.grid-container {
  display: grid;
  grid-template-areas:
    'a1 a2 a3 a3'
    'a4 a5 a3 a3'
    'a6 a7 a8 a9';
}

/* Additional styling */
.grid-container > div {
  background-color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.grid-container {
  grid-gap: 1px;
  background-color: #000;
  margin: 10px;
  padding: 1px;
}
.item3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
</div>

带tailwindcss的特殊网格布局

2 个答案: