Layouts

About

PatternFly’s layouts are used to place components on a page. They create a fully responsive structure to keep components organized and aligned across screen sizes.

Think of layouts as the scaffolding within which your components will live. When laying out your page, consider the layout pattern that suits your content. Multiple layouts can be used within the same page to create versatile and effective UIs.

Bullseye

Centers content vertically and horizontally.

Flex

Creates consistently spaced custom layouts that are responsive to other layouts and PatternFly components.

Gallery

Arranges content in a responsive grid of uniform rows and columns.

Grid

Arranges content on a fixed-size 12 column grid.

Level

Evenly distributes content horizontally.

Split

Distributes multiple items horizontally, which adapt to viewport resizing.

Stack

Distributes multiple items vertically, which adapt to the available space of a container.

View source on GitHub