Angular项目使用Tailwind实现2行6列Grid布局不生效问题求助

问题原因 #

你遇到的不是行配置未识别，是CSS Grid的默认行为导致的：grid-rows-2仅明确定义了前2行的轨道尺寸，当子元素数量超过2行×6列=12个时，Grid会自动生成隐式行来盛放溢出的元素，25条数据自然就会生成5行（25÷6向上取整为5）。

解决方案 #

最符合你「查看更多」按需加载需求的方案是直接截断渲染的数组，避免多余DOM生成，性能更优：

1. 首先在对应组件的ts文件中声明控制展示数量的变量：

// 默认展示前12条
showActorCount: number = 12;

2. 修改HTML模板，用Angular自带的slice管道截断遍历的数组，同时新增查看更多按钮的逻辑：

<div class="grid grid-rows-2 grid-cols-6 mt-4 gap-4">
  <div *ngFor="let actor of actors | slice:0:showActorCount" class="flex flex-col gap-2">
    <!-- 补充：旧版Tailwind的aspect-h-1 aspect-w-1可替换为内置的aspect-square，效果一致 -->
    <div class="w-full aspect-square rounded overflow-hidden">
      <img src="{{actor.imageUrl}}" alt="演员照片">
    </div>
    <span class="text-white text-center">{{actor.name}}</span>
  </div>
</div>
<button 
  *ngIf="showActorCount < actors.length"
  (click)="showActorCount = actors.length"
  class="mt-4 px-4 py-2 text-white"
>
  查看更多
</button>

如果确实需要用CSS强制隐藏超出2行的内容，也可以给Grid容器加overflow-hidden属性，但这种方案多余的DOM仍然存在，只是被隐藏了，不推荐配合查看更多逻辑使用。

内容的提问来源于stack exchange，提问作者Heathcliff