configure kendo-list-view to display in a grid with angular

Question

I created a list of cards in angular using kendo UI and I want them to display like this:

Heres the stackblitz: https://stackblitz.com/edit/angular-n4skbk?file=app/destination.component.ts

Instead of the window pattern its appearing in a stacked way.

I setup CSS for it, but it works on stackblitz but doesnt on my application. Need help understanding what is going wrong.

.listview-content {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 15px 15px;
    border: 5px;
}

.k-listview-header,
.k-listview-content {
  padding: 20px 0;
  justify-content: center;
}

<kendo-listview
[kendoListViewBinding]="usersList"
[pageable]="pagerSettings"
[pageSize]="pageSize"
[containerClass]="'listview-content'"
>
<ng-template
    kendoListViewItemTemplate
    let-dataItem="dataItem"
    let-isLast="isLast"
>
<user-card [user]="dataItem"></user-card>
</ng-template>

</kendo-listview>

Answer 1

The code was missing encapsulation: ViewEncapsulation.None, in the @component{} decorator