I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure.
One of their examples includes the following instructions:
When in grid mode, the ng-template element should have a div element as a wrapper with a style class from PrimeFlex applied.
<p-dataView [value]="cars">
<ng-template let-car pTemplate="listItem">
<div>
{{car.id}}
</div>
</ng-template>
<ng-template let-car pTemplate="gridItem">
<div class="p-col-12 p-md-3">
{{car.year}}
</div>
</ng-template>
</p-dataView>
In my own code implementation, I followed the same structure. However, upon investigating, I noticed that the PrimeFlex CSS file did not contain the .p-grid and .p-col-* stylings as documented.
<p-dataView [value]="shows" layout="grid">
<ng-template pTemplate="header"> List of shows </ng-template>
<ng-template let-show pTemplate="gridItem">
<div class="p-col-12 p-md-4">
<div class="show-grid-item card">
{{ show.title }}
</div>
</div>
</ng-template>
</p-dataView>
I couldn't find the specific FlexGrid styles mentioned in the documentation within the primeflex.css file. If those styles are unavailable, is there a way to utilize the standard Grid styles provided by PrimeFlex for the DataView component?