Package org.patternfly.layout

package org.patternfly.layout
PatternFly layouts provide structure and positioning for content on a page. They offer flexible, responsive solutions for organizing UI elements and are designed to work seamlessly across different screen sizes and breakpoints.

Available Layouts

This package provides the following layout types:
Bullseye
Centers content both vertically and horizontally within a container.
Flex
Provides a completely custom layout utilizing the PatternFly spacer and breakpoint systems. Supports adjustments to spacing, direction, alignment, justification, wrapping, and width.
Gallery
Arranges content in a responsive grid with uniform rows and columns that wrap automatically.
Grid
Places content on a fixed 12-column grid system.
Level
Distributes content evenly across a horizontal row.
Split
Distributes content horizontally with support for wrapping and spacing control.
Stack
Positions items vertically, with one or more items filling the available vertical space.

Common API Pattern

All layouts follow a consistent API design:
  1. Static factory methods - Create layout instances using static methods named after the layout
  2. Add methods - Add child items using addItem() or addItems() methods
  3. Builder methods - Configure layout properties using fluent builder methods
  4. Responsive breakpoints - Many properties support responsive values at different breakpoints

Usage Examples

Bullseye Layout

Center content both vertically and horizontally: 
Bullseye bullseye = bullseye()
    .addItem(bullseyeItem()
        .add(div().textContent("Centered content")));

Flex Layout

Create a flexible layout with custom spacing and alignment: 
Flex flex = flex()
    .direction(Direction.column)
    .spaceItems(SpaceItems.md)
    .addItem(flexItem().add(div().textContent("Item 1")))
    .addItem(flexItem().add(div().textContent("Item 2")))
    .addItem(flexItem().add(div().textContent("Item 3")));
Create a responsive grid of cards: 
Gallery gallery = gallery()
    .gutter()
    .addItem(galleryItem().add(card()))
    .addItem(galleryItem().add(card()))
    .addItem(galleryItem().add(card()));

Grid Layout

Position content on a 12-column grid: 
Grid grid = grid()
    .gutter()
    .addItem(gridItem().span(8).add(div().textContent("Main content")))
    .addItem(gridItem().span(4).add(div().textContent("Sidebar")));

Stack Layout

Arrange items vertically: 
Stack stack = stack()
    .gutter()
    .addItem(stackItem().add(div().textContent("Header")))
    .addItem(stackItem().fill().add(div().textContent("Main content")))
    .addItem(stackItem().add(div().textContent("Footer")));

Base Classes

All layouts extend from BaseLayout, which implements common interfaces from Elemento for element manipulation: This provides a rich set of methods to manipulate the layout's underlying DOM element.

Responsive Design

Many layout properties support responsive values at different breakpoints using the Breakpoints API: 
Flex flex = flex()
    .direction(breakpoints(
        default_, Direction.column,
        md, Direction.row))
    .spaceItems(breakpoints(
        default_, SpaceItems.sm,
        lg, SpaceItems.lg));
Available breakpoints:
  • default_ - Default value
  • sm - Small screens (576px+)
  • md - Medium screens (768px+)
  • lg - Large screens (992px+)
  • xl - Extra large screens (1200px+)
  • _2xl - 2X large screens (1450px+)

Gutter Support

Several layouts implement the Gutter interface, which provides methods to add spacing between child items: 
Gallery gallery = gallery()
    .gutter()  // Enable gutter spacing
    .addItem(galleryItem().add(card()))
    .addItem(galleryItem().add(card()));
Layouts supporting gutters:
See Also: