带有 tailwindcss 的特殊网格布局

Question

我想创建这种布局：

Layout wanted

我想使用流行的实用程序 css 框架 "Tailwindcss" 来实现。有人知道如何进行吗？任何方向都会帮助我。

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

另外，数据是从数据库中拉出来的，按照图中的编号顺序到达。

非常感谢您的宝贵时间！

Answer 1

您只能使用 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 2

自 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 3

此 plugin for grid areas 允许您在 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 像素），布局将看起来像您想要的网格。

在较小的屏幕上（如果需要，您可以使用不同的断点，或者根本不使用 none，但是在您的布局变得有点被您想要的 4 列挤压之前，可能会有一个最小宽度)，内容将使用默认块布局规则以 DOM 顺序显示。假设您较大的英雄内容比其他内容更重要，您会希望它呈现在另一个之上。

DOM顺序也与使用屏幕阅读器等无障碍技术的人相关。

带有 tailwindcss 的特殊网格布局

Special grid layout with tailwindcss

css

css-grid

tailwind-css