PrimeFaces Extensions Showcase

FluidGrid

FluidGrid is a cascading grid layout component. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. It is responsive, meaning the grid will reflow as the window size changes.

The component is based on the great Masonry JavaScript library

Use Cases

Documentation pe:fluidGrid

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fitWidth	When true, grid fits within the container width.Default is false.
hGutter	Horizontal gutter between items in pixels.Default is 0.
hasImages	When true, images are taken into account for layout (wait for load).Default is false.
id	Unique identifier of the component in a namingContainer.Default is generated.
originLeft	When true, items are laid out from left to right.Default is true.
originTop	When true, items are laid out from top to bottom.Default is true.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizeBound	When true, layout is recalculated on window resize.Default is true.
stamp	Search expression for element(s) to stamp - hidden during layout.
style	Inline style for the grid.
styleClass	Style class for the grid.
transitionDuration	CSS transition duration for layout changes.Default is 0.4s.
vGutter	Vertical gutter between items in pixels.Default is 0.
value	The dynamic data model (e.g. DynaFormModel).
var	Name of the request-scoped variable that exposes the current row/control data.
varContainerId	Name of the request-scoped variable that exposes the current container client id.
widgetVar	Name of the client-side widget variable.