The stack layout positions items vertically, with one or more items filling the available vertical space.


PatternFly website screenshot showing modal created with bullseye layout.
  1. Stack: The stack container, which holds all stack items.
  2. Stack item: An individual section of content to be placed in the stack.


When to use stack vs other layouts

Use the stack layout when you do not need your content to wrap. If you need a layout that wraps, instead choose the flex, gallery, level, or split layout.


Multiple items that fill space

You can specify which stack items fill the remaining vertical space in the layout. More than one item can be set to fill, and they will share the remaining space equally.

Gutters around items

To adjust spacing between items, you can apply gutters, as shown in the related React and HTML examples.

View source on GitHub