Responsive PanelGrid in JSF Primeface

Here, we are going to learn about responsive PanelGrid in JSF Primeface component. As we know primefaces providing lots of good stuffs for JSF. In Primeface, there is a component name Panel Grid
which we are going to use for our convenience.

In most of the cases, PanelGrid used for making our content in a proper way. If users opens our website which we have made in jsf using panelGrid component that not in responsive manner, that could be really ugly as for as user concern, So here we are going to break it just by using Layout attribute in the panel Grid component. for exaple,

<h3>Responsive</h3>

<p:panelGrid columns="3" layout="grid">           

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

    <h:outputText value="Content" />

</p:panelGrid>

Output:

If we use Layout attribute, then we could make panelgrid as responsive one and gives better look to your website even if user opens it in mobile or PC.