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')}