顺风网格布局答案

【问题标题】：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}}" alt="Picture of actor">
    </div>
    <span class="text-white text-center">{{actor.name}}</span>
  </div>
</div>

【问题讨论】：

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

标签： css angular css-grid tailwind-css

【解决方案1】：

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

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

【讨论】：