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 a simple usage with static items. Static items are defined by the tag pe:fluidGridItem which can be placed multiple times below the main tag pe:fluidGrid. Items can have different width / height specified by style classes. The main container for the pe:fluidGrid has the style class pe-fluidgrid and the container of the pe:fluidGridItem has the style class pe-fluidgrid-item.

In the example we used two attributes hGutter and vGutter for horizontal and vertical space between items. Click on the button below and resize the browser to test the fluid grid!

<pe:fluidGrid hGutter="10" vGutter="10">
    <pe:fluidGridItem styleClass="ui-widget-header">Item 1</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2">Item 2</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h3">Item 3</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 4</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w3">Item 5</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 6</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 7</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 8</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h3">Item 9</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 10</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 11</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 12</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2">Item 13</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2">Item 14</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 15</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 16</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 17</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 18</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h3">Item 19</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 20</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 21</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 22</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h2">Item 23</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2">Item 24</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 25</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 26</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header h3">Item 27</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 28</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w3">Item 29</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 30</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 31</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header w2">Item 32</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 33</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 34</pe:fluidGridItem>
    <pe:fluidGridItem styleClass="ui-widget-header">Item 35</pe:fluidGridItem>
<h:outputStylesheet id="fluidGridCSS">
    .pe-fluidgrid {
        max-width: 900px;
    .pe-fluidgrid .pe-fluidgrid-item {
        width:  60px;
        height: 60px;
        border-radius: 5px;
        padding-top: 0.5em;
        text-align: center;
    .pe-fluidgrid-item.w2 {width: 130px;}
    .pe-fluidgrid-item.w3 {width: 200px;}    
    .pe-fluidgrid-item.h2 {height: 100px;}
    .pe-fluidgrid-item.h3 {height: 130px;}
Components and more
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a naming container.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
value Collection of items (FluidGridItem) representing model of this component.
var Name of the request-scoped variable for the underlaying object for each iteration.
varContainerId Name of the request-scoped variable which contains the prefix of the client Id within pe:fluidGridItem. This property allows to get the whole clientId of a component within pe:fluidGridItem. The whole client Id is sometimes required for JavaScript or RequestContext.update(...).
style Style of the main container element. Default value is null.
styleClass Style class of the main container element. Default value is null.
hGutter Horizontal space between item elements (interpreted as pixels). Default is 0.
vGutter Vertical space between item elements (interpreted as pixels). Default is 0.
fitWidth Sets the width of the container to fit the available number of columns, based on the size of container's parent element. When enabled, you can center the container with CSS. Note: This option does not work with percentage width of items. Default is false.
originLeft Controls the horizontal flow of the layout. By default, item elements start positioning at the left. Set to false for right-to-left layouts.
originTop Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts. It's like Tetris!
resizeBound Binds layout to window resizing. You can bind and unbind resize layout afterwards with the bindResize and unbindResize client-side widget's methods. Default is true.
stamp Specifies which elements are stamped within the layout. These are special layout elements which will not be laid out. Rather, FluidGrid will layout item elements below stamped elements. You can use here every search expressions supported by PrimeFaces Search Expression Framework. Default is null.
transitionDuration Duration of the transition when items change position or appearance, set in a CSS time format. To disable all transitions, set this attribute to null. Default is 0.4s.
hasImages Boolean flag if items contain any images. This can fix overlapping items which are caused by items that change size after a layout due to unloaded media like images. Setting this flag allows to layout all items after they have their proper sizes (images have been loaded). Default value is false.
Events (move mouse over the names to see classes)
Name Description
layoutCompletefired after a layout and all positioning transitions have been completed.
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55