带有 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.tailwindcss.com/q4RB94MPb8

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>

Answer 3

这个网格区域插件允许您在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 顺序也与使用屏幕阅读器等无障碍技术的人们相关。