sections.fluidgrid.static.xhtml Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of primefaces-extensions-showcase Show documentation

The newest version!



    
        
            
        
        
            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!
        
        
        
            
        
        
        
            
${showcase:getFileContent('/sections/fluidgrid/examples/example-static.xhtml')}