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")));

Gallery Layout

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:

• ElementAttributeMethods
• ElementClassListMethods
• ElementContainerMethods
• HTMLElementStyleMethods
• And more...

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:

• Gallery
• Grid
• Level
• Split
• Stack

See Also:

• PatternFly Layouts Documentation
• BaseLayout
• Breakpoints

Related Packages

Package	Description
org.patternfly.layout.bullseye	Provides the PatternFly bullseye layout for centering content both vertically and horizontally within a container.
org.patternfly.layout.flex	Provides the PatternFly flex layout for building custom layouts with full control over spacing, direction, alignment, justification, wrapping, and width.
org.patternfly.layout.gallery	Provides the PatternFly gallery layout for arranging content in a responsive grid with uniform rows and columns that wrap automatically.
org.patternfly.layout.grid	Provides the PatternFly grid layout for placing content on a fixed 12-column grid system.
org.patternfly.layout.level	Provides the PatternFly level layout for distributing content evenly across a horizontal row.
org.patternfly.layout.split	Provides the PatternFly split layout for distributing content horizontally with support for a fill item, wrapping, and spacing control.
org.patternfly.layout.stack	Provides the PatternFly stack layout for positioning items vertically, with one or more items filling the available vertical space.

Class	Description
BaseLayout<E extends elemental2.dom.HTMLElement, B extends TypedBuilder<E,B>>	Base class for all PatternFly layout components, providing common layout behavior and OUIA support.
Layout	Common interface implemented by all PatternFly layout components.
LayoutType	Enumerates the available PatternFly layout types with their identifiers and OUIA names.
SubLayout<E extends elemental2.dom.HTMLElement, B extends TypedBuilder<E,B>>	Base class for layout sub-components such as items within a layout container.