<style type="text/css"> .ui-panelgrid.showcase-text-align-center .ui-grid-responsive .ui-panelgrid-cell { text-align: center; } .customPanelGrid .ui-panelgrid-content { align-items: center; } </style> <h3 style="margin-top:0">Basic</h3> <p:panelGrid columns="2"> <f:facet name="header"> <p:graphicImage name="demo/images/misc/kobe.png" /> </f:facet> <h:outputText value="Name:" /> <h:outputText value="Kobe Bryant" /> <h:outputText value="Team:" /> <h:outputText value="Los Angeles Lakers" /> <h:outputText value="Position:" /> <h:outputText value="Shooting Guard" /> <h:outputText value="Number:" /> <h:outputText value="24" /> </p:panelGrid> <h3>Responsive (Basic)</h3> <p:panelGrid columns="3" layout="grid" styleClass="showcase-text-align-center"> <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> <h3>Responsive (ColumnClasses)</h3> <p:panelGrid columns="4" layout="grid" styleClass="showcase-text-align-center" columnClasses="ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3"> <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" /> <h:outputText value="Content" /> <h:outputText value="Content" /> <h:outputText value="Content" /> </p:panelGrid> <h3>Responsive (PrimeFlex, Basic)</h3> <p:panelGrid columns="3" layout="flex" styleClass="showcase-text-align-center"> <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> <h3>Responsive (PrimeFlex, ColumnClasses)</h3> <p:panelGrid columns="4" layout="flex" styleClass="showcase-text-align-center" columnClasses="p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3"> <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" /> <h:outputText value="Content" /> <h:outputText value="Content" /> <h:outputText value="Content" /> </p:panelGrid> <h3>Responsive (PrimeFlex, p-align-baseline)</h3> <p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid"> <p:outputLabel for="text1" value="Text 1" /> <p:inputText id="text1" /> <p:outputLabel for="text2" value="Text 2" /> <p:inputText id="text2" /> <p:outputLabel for="date" value="Date" /> <p:datePicker id="date" showIcon="true" style="width:auto" /> <p:outputLabel for="checkbox" value="Checkbox" /> <p:selectBooleanCheckbox id="checkbox" itemLabel="Checkbox" /> <p:outputLabel for="text3" value="Text 3" /> <p:inputText id="text3" /> <p:outputLabel for="selectOne" value="SelectOne (misaligned)" /> <p:selectOneMenu id="selectOne"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> <f:selectItem itemLabel="PS4" itemValue="PS4" /> <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> </p:selectOneMenu> </p:panelGrid> <h3>Responsive (PrimeFlex, align-items: center)</h3> <p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" styleClass="customPanelGrid" contentStyleClass="ui-fluid"> <p:outputLabel for="textA1" value="Text 1" /> <p:inputText id="textA1" /> <p:outputLabel for="textA2" value="Text 2" /> <p:inputText id="textA2" /> <p:outputLabel for="dateA" value="Date" /> <p:datePicker id="dateA" showIcon="true" style="width:auto" /> <p:outputLabel for="checkboxA" value="Checkbox" /> <p:selectBooleanCheckbox id="checkboxA" itemLabel="Checkbox" /> <p:outputLabel for="text3A" value="Text 3" /> <p:inputText id="text3A" /> <p:outputLabel for="selectOneA" value="SelectOne" /> <p:selectOneMenu id="selectOneA"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> <f:selectItem itemLabel="PS4" itemValue="PS4" /> <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> </p:selectOneMenu> </p:panelGrid> <h3>Responsive (PrimeFlex, Default alignment)</h3> <p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="ui-fluid"> <p:outputLabel for="textB1" value="Text 1" /> <p:inputText id="textB1" /> <p:outputLabel for="textB2" value="Text 2" /> <p:inputText id="textB2" /> <p:outputLabel for="dateB" value="Date" /> <p:datePicker id="dateB" showIcon="true" style="width:auto" /> <p:outputLabel for="checkboxB" value="Checkbox" /> <p:selectBooleanCheckbox id="checkboxB" itemLabel="Checkbox" /> <p:outputLabel for="text3B" value="Text 3" /> <p:inputText id="text3B" /> <p:outputLabel for="selectOneB" value="SelectOne" /> <p:selectOneMenu id="selectOneB"> <f:selectItem itemLabel="Select One" itemValue="" /> <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" /> <f:selectItem itemLabel="PS4" itemValue="PS4" /> <f:selectItem itemLabel="Wii U" itemValue="Wii U" /> </p:selectOneMenu> </p:panelGrid> <h3>Grouping</h3> <p:panelGrid style="margin-top:20px"> <f:facet name="header"> <p:row> <p:column colspan="7">1995-96 NBA Playoffs</p:column> </p:row> <p:row> <p:column colspan="2">Conf. Semifinals</p:column> <p:column colspan="2">Conf. Finals</p:column> <p:column colspan="2">NBA Finals</p:column> <p:column>Champion</p:column> </p:row> </f:facet> <p:row> <p:column style="font-weight: bold;">Seattle</p:column> <p:column style="font-weight: bold;">4</p:column> <p:column rowspan="2" style="font-weight: bold;">Seattle</p:column> <p:column rowspan="2" style="font-weight: bold;">4</p:column> <p:column rowspan="5">Seattle</p:column> <p:column rowspan="5">2</p:column> <p:column rowspan="11" style="font-weight: bold;">Chicago</p:column> </p:row> <p:row> <p:column>Houston</p:column> <p:column >0</p:column> </p:row> <p:row> <p:column colspan="4" styleClass="ui-widget-header"> <p:spacer height="0"/> </p:column> </p:row> <p:row> <p:column style="font-weight: bold;">Utah</p:column> <p:column style="font-weight: bold;">4</p:column> <p:column rowspan="2">Utah</p:column> <p:column rowspan="2">3</p:column> </p:row> <p:row> <p:column>San Antonio</p:column> <p:column >2</p:column> </p:row> <p:row> <p:column colspan="6" styleClass="ui-widget-header"> <p:spacer height="0"/> </p:column> </p:row> <p:row> <p:column style="font-weight: bold;">Chicago</p:column> <p:column style="font-weight: bold;">4</p:column> <p:column rowspan="2" style="font-weight: bold;">Chicago</p:column> <p:column rowspan="2" style="font-weight: bold;">4</p:column> <p:column rowspan="5" style="font-weight: bold;">Chicago</p:column> <p:column rowspan="5" style="font-weight: bold;">4</p:column> </p:row> <p:row> <p:column>New York</p:column> <p:column >1</p:column> </p:row> <p:row> <p:column colspan="4" styleClass="ui-widget-header"> <p:spacer height="0"/> </p:column> </p:row> <p:row> <p:column>Atlanta</p:column> <p:column >1</p:column> <p:column rowspan="2">Orlando</p:column> <p:column rowspan="2">0</p:column> </p:row> <p:row> <p:column style="font-weight: bold;">Orlando</p:column> <p:column style="font-weight: bold;">4</p:column> </p:row> <f:facet name="footer"> <p:row> <p:column colspan="4" style="text-align: right"> Finals MVP </p:column> <p:column colspan="3" rowspan="3"> Michael Jordan (Chicago) </p:column> </p:row> <p:row> <p:column colspan="4" style="text-align: right"> Season MVP </p:column> </p:row> <p:row> <p:column colspan="4" style="text-align: right"> Top Scorer </p:column> </p:row> </f:facet> </p:panelGrid>