我想創建這種布局:

需要布局

我想使用流行的實用css框架“Tailwindcss”來實現這一點。有人知道如何進行嗎？任何方向都會幫助我。

我確信這種結構是可能的，但我在周圍找不到任何東西。

此外，數據是從數據庫中提取出來的，并按照圖片中的編號順序到達。

提前感謝您的寶貴時間！

自從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.tailwindcss.com/q4RB94MPb8

你只能使用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配置中定義網格區域，并創建實用程序來將元素放置在網格中你想要的位置:

// tailwind.config.js
module.exports = {
  purge: {
    content: [
      './src/**/*.html',
    ],
  },
  theme: {
    extend: {
      gridTemplateAreas: {
        'default': [
          '.    .    hero hero',
          '.    .    hero hero',
          '.    .    .    .',
        ]
      },
    }
  },
  plugins: [
    require('../tailwindcss-grid-areas'),
  ],
}

<div class="lg:grid grid-areas-default grid-cols-4 w-full h-64">
    <div class="grid-in-hero">3 (Hero)</div>

    <div>1</div>
    <div>2</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

在大于“lg”斷點的屏幕上(默認的TailwindCSS值是1024 px)，布局將看起來像您想要的網格。

在較小的屏幕上(如果需要，您可以使用不同的斷點，或者根本不使用斷點，但是在您的布局被您想要的4列擠壓之前，可能會有一個最小寬度)，內容將使用默認的塊布局規則以DOM順序顯示。假設你更大的英雄內容比其他內容更重要，你會希望它呈現在其他內容之上。

DOM順序也與使用屏幕閱讀器等可訪問技術的人相關。