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 how to specifies elements which are stamped within the layout. These are special layout elements which will not be laid out by FluidGrid. Rather, FluidGrid will layout items below stamped elements. To specify stamped elements, use the stamp attribute which can be any search expression supported by the PrimeFaces Search Expression Framework.

Furtermore, some client-side widget's methods will be demonstrated too. Stamped elements can be toggled by the widget's method unstamp() and stamp(). The layout can be triggered automatically by the widget's method layout(). Note: When the fluid grid is within a layout pane / unit, it re-layouts itself automatically on resizing this layout pane / unit. In this case, set the attribute resizeBound to false to deacivate the re-layouting when resizing the browser window.
Source

<pe:fluidGrid stamp="@(.pe-fluidgrid .stamp)" resizeBound="false" widgetVar="fluidGridWdgt">
    <div class="stamp"></div>
    
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
</pe:fluidGrid>
            
<p:commandButton value="Toggle stumped" type="button" style="margin-top:15px;"
                 onclick="toggleStamped()"/>

<h:outputScript id="fluidGridScript" target="body">
/* <![CDATA[ */
    isStamped = true;
    
    function toggleStamped() {
        // stamp or unstamp element
        if (isStamped) {
            PF('fluidGridWdgt').unstamp($(".pe-fluidgrid .stamp").get());
        } else {
            PF('fluidGridWdgt').stamp($(".pe-fluidgrid .stamp").get());
        }
        
        // trigger layout
        PF('fluidGridWdgt').layout();
        
        isStamped = !isStamped;
    }
/* ]]> */
</h:outputScript>
            
<h:outputStylesheet id="fluidGridCSS">
    .pe-fluidgrid {
        max-width: 1000px;
        position: relative;
    }
    
    .pe-fluidgrid .pe-fluidgrid-item {
        width:  60px;
        height: 60px;
        background: #D26;
        border: 1px solid orange;
        border-radius: 5px;
        opacity: 0.7;
    }
    
    .pe-fluidgrid-item.w2 {width: 120px;}
    .pe-fluidgrid-item.w3 {width: 180px;}    
    .pe-fluidgrid-item.h2 {height: 100px;}
    .pe-fluidgrid-item.h3 {height: 130px;}
    
    .pe-fluidgrid .stamp {
        position: absolute;
        right: 15%;
        top: 10px;
        width: 50%;
        height: 70px;
        background: orange;
        border: 4px dotted black;
    }
</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.
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-03-07 01:34