DataView offers basic responsiveness. You can improve this for e.g. large screen via gridRowStyleClass-attribute. Additional you can use PrimeFlex instead of Grid CSS via flex-attribute or set primefaces.FLEX as context-param.
<div class="product card">
<h:form id="form">
<p:dataView var="product" value="#{dataGridView.products}" rows="12" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
layout="grid" gridRowStyleClass="lg:col-6 xl:col-4" flex="true">
<p:dataViewGridItem>
<div class="product-grid-item card border-1">
<div class="product-grid-item-top">
<div>
<i class="pi pi-tag product-category-icon"/>
<span class="product-category">#{product.category}</span>
</div>
<span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
</div>
<div class="product-grid-item-content">
<p:graphicImage name="images/product/#{product.image}" library="demo"/>
<div class="product-name">#{product.name}</div>
<div class="product-description">#{product.description}</div>
<p:rating readonly="true" value="#{product.rating}"/>
</div>
<div class="product-grid-item-bottom">
<h:outputText value="#{product.price}" styleClass="product-price">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
<p:commandButton type="button"
value="Add To Cart"
icon="pi pi-shopping-cart"
disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
</p:commandButton>
</div>
</div>
</p:dataViewGridItem>
<p:dataViewListItem>
<div class="product-list-item">
<p:graphicImage name="demo/images/product/#{product.image}"/>
<div class="product-list-detail">
<div class="product-name">#{product.name}</div>
<div class="product-description">#{product.description}</div>
<p:rating readonly="true" value="#{product.rating}"/>
<i class="pi pi-tag product-category-icon"/><span
class="product-category">#{product.category}</span>
</div>
<div class="product-list-action">
<h:outputText value="#{product.price}" styleClass="product-price">
<f:convertNumber currencySymbol="$" type="currency"/>
</h:outputText>
<p:commandButton type="button"
value="Add To Cart"
icon="pi pi-shopping-cart"
disabled="#{product.inventoryStatus == 'OUTOFSTOCK'}">
</p:commandButton>
<span class="product-badge status-#{product.inventoryStatus.name().toLowerCase()}">#{product.inventoryStatus.text}</span>
</div>
</div>
</p:dataViewListItem>
</p:dataView>
</h:form>
</div>