PrimeFaces Extensions Showcase

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 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!

Source

XHTML page


<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>
</pe:fluidGrid>
            
<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;}
</h:outputStylesheet>