I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS.
The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, followed by a "show more" button to display the rest of the actors.
Currently, although I have specified 6 columns, there seems to be an issue with the rows as I am seeing 5 rows instead of the desired 2.
What could be causing this discrepancy?
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>