Package org.patternfly.layout.grid

package org.patternfly.layout.grid
Provides the PatternFly grid layout for placing content on a fixed 12-column grid system.

The grid layout allows positioning items across 12 columns with support for spanning multiple columns and rows, gutters for spacing, responsive column overrides at different breakpoints, and ordering control.

Usage

A basic grid layout with column spans and gutters: 
import static org.patternfly.layout.grid.Grid.grid;
import static org.patternfly.layout.grid.GridItem.gridItem;

grid().gutter()
        .addItem(gridItem().span(8).text("Main content"))
        .addItem(gridItem().span(4).text("Sidebar"))
        .addItem(gridItem().span(4).text("Footer left"))
        .addItem(gridItem().span(8).text("Footer right"));
A grid with responsive column overrides: 
import static org.patternfly.layout.grid.Grid.grid;
import static org.patternfly.layout.grid.GridItem.gridItem;
import static org.patternfly.style.Breakpoint._2xl;
import static org.patternfly.style.Breakpoint.lg;
import static org.patternfly.style.Breakpoint.md;
import static org.patternfly.style.Breakpoint.sm;
import static org.patternfly.style.Breakpoints.breakpoints;

grid().columns(breakpoints(sm, 6, md, 4, lg, 3, _2xl, 1))
        .addItem(gridItem().text("Grid item"))
        .addItem(gridItem().text("Grid item"))
        .addItem(gridItem().text("Grid item"))
        .addItem(gridItem().text("Grid item"));
See Also:
  • Classes
    Class
    Description
    Grid
    The grid layout places content on a fixed 12 column grid.
    GridItem