Package org.patternfly.layout.gallery


package org.patternfly.layout.gallery
Provides the PatternFly gallery layout for arranging content in a responsive grid with uniform rows and columns that wrap automatically.

The gallery layout is useful for displaying a collection of similarly structured items, such as cards or tiles, in a responsive grid. It supports gutters for spacing between items and allows adjusting minimum and maximum widths at different breakpoints.

Usage

A basic gallery with gutters:
import static org.patternfly.layout.gallery.Gallery.gallery;
import static org.patternfly.layout.gallery.GalleryItem.galleryItem;

gallery().gutter()
        .addItem(galleryItem().text("Gallery item"))
        .addItem(galleryItem().text("Gallery item"))
        .addItem(galleryItem().text("Gallery item"))
        .addItem(galleryItem().text("Gallery item"));
A gallery with responsive minimum widths:
import static org.patternfly.core.Tuple.tuple;
import static org.patternfly.layout.gallery.Gallery.gallery;
import static org.patternfly.layout.gallery.GalleryItem.galleryItem;
import static org.patternfly.style.Breakpoint.lg;
import static org.patternfly.style.Breakpoint.md;
import static org.patternfly.style.Breakpoint.xl;

gallery().gutter()
        .minWidths(tuple(md, "100px"), tuple(lg, "150px"), tuple(xl, "200px"))
        .addItem(galleryItem().text("Gallery item"))
        .addItem(galleryItem().text("Gallery item"))
        .addItem(galleryItem().text("Gallery item"));
See Also:
  • Classes
    Class
    Description
    The gallery layout is used to arrange content in a responsive grid.