顺风网格布局

Posted 2023-03-07

【中文标题】顺风网格布局

【英文标题】：Tailwind grid layout

【发布时间】：2021-12-24 06:08:40

【问题描述】：

我正在尝试在我的 Angular 项目中使用 Tailwind 显示 2 行 6 列的网格布局。

我循环的演员数组由 25 个演员组成。所以这里的目标是在 2 行中显示 12 个演员，然后显示一个“显示更多”按钮来显示剩余的演员。

目前我得到 6 列，但行似乎被忽略了，因为我目前得到 5 行而不是 2 行。

我在这里错过了什么？

HTML

<div class="grid grid-rows-2 grid-cols-6 mt-4 gap-4">
  <div *ngFor="let actor of actors" class="flex flex-col gap-2">
    <div class="w-full aspect-h-1 aspect-w-1 rounded overflow-hidden">
      <img src="actor.imageUrl" >
    </div>
    <span class="text-white text-center">actor.name</span>
  </div>
</div>

【问题讨论】：

CSS Grid 不能代表您隐藏任何内容，因为它超出了声明的行数。模板行规则之外的内容将简单地采用默认的网格放置。您需要自己处理传递给 html 的数据，这是一个问题，他们在 Angular ***.com/questions/42708092/…

中使用切片管道解决了这个问题

感谢您的澄清！

【参考方案1】：

这似乎不是那样工作，所以最简单的方法是像下面的代码一样将“actors”数组切片为 12 个索引，并显示剩余的actors 以显示更多按钮。

<div *ngFor='let item of items | slice:start:end'>