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!