arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
FluidGrid
FluidGrid allows to set up a nice tight grid with items that have variable heights and widths. FluidGrid is a responsive grid. That means, the grid will reflow as the window size changes. Items can have any content: text, images, links, input fields, etc. They can be defined in a static or in a dynamic way as in data iteration components.

This example demonstrates dynamic items whose label attribute on input components is bound to the data model via the var variable. The Change Items button dynamically replaces the grid's items to verify that labels are correctly preserved across dynamic updates.

Click Submit with empty required fields to see that each validation message correctly displays its own component's label — not the label of the last item.
Source

<p:growl id="growl" showDetail="true" showSummary="true">
        <p:autoUpdate />
    </p:growl>

    <p:commandButton value="Change Items" action="#{fluidGridDynamicLabelsController.changeItems}"
                     process="@this" update="fluidGrid" style="margin-bottom:10px"/>

    <pe:fluidGrid id="fluidGrid" value="#{fluidGridDynamicLabelsController.items}" var="data"
                  resizeBound="false" hGutter="20" style="width:450px">
        <pe:fluidGridItem type="input">
            <div class="dynLabel">
                <p:outputLabel for="txt" value="#{data.label}"/>
            </div>
            <p:inputText id="txt" value="#{data.value}" label="#{data.label}" required="#{data.required}"/>
        </pe:fluidGridItem>
    </pe:fluidGrid>

    <p:commandButton value="Submit" style="margin-top: 10px;"
                     process="fluidGrid" update="fluidGrid"
                     oncomplete="if(!args.validationFailed) {PF('inputValuesWidget').show();}"/>

    <p:dialog header="Submitted Values" widgetVar="inputValuesWidget">
        <p:dataList id="inputValues" value="#{fluidGridDynamicLabelsController.items}" var="item"
                    style="margin:10px;">
            <h:outputText value="#{item.data.label} : #{item.data.value}" style="margin-right:15px;"/>
        </p:dataList>
    </p:dialog>

    <h:outputStylesheet id="fluidGridCSS">
        .pe-fluidgrid-item {
            width: 180px;
            height: 65px;
        }
        .pe-fluidgrid-item input {
            width: 170px;
        }
        .dynLabel {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </h:outputStylesheet>
            
Components and more
Documentation
Attributes (move mouse over the names to see data types)
Name Description
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fitWidthWhen true, grid fits within the container width.Default is false.
hGutterHorizontal gutter between items in pixels.Default is 0.
hasImagesWhen true, images are taken into account for layout (wait for load).Default is false.
idUnique identifier of the component in a namingContainer.Default is generated.
originLeftWhen true, items are laid out from left to right.Default is true.
originTopWhen true, items are laid out from top to bottom.Default is true.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizeBoundWhen true, layout is recalculated on window resize.Default is true.
stampSearch expression for element(s) to stamp - hidden during layout.
styleInline style for the grid.
styleClassStyle class for the grid.
transitionDurationCSS transition duration for layout changes.Default is 0.4s.
vGutterVertical gutter between items in pixels.Default is 0.
valueThe dynamic data model (e.g. DynaFormModel).
varName of the request-scoped variable that exposes the current row/control data.
varContainerIdName of the request-scoped variable that exposes the current container client id.
widgetVarName of the client-side widget variable.Default is generated ('widget_' + componentClientId).
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-06-23 15:07