---
id: Stack
section: layouts
---
The **stack** layout positions items vertically, with one or more items filling the available vertical space.

## Elements

<img src="./img/stack-example.png"  alt="PatternFly website screenshot showing modal created with bullseye layout."  width="3330px"/>

1. **Stack**: The stack container, which holds all stack items.
1. **Stack item**: An individual section of content to be placed in the stack. 

## Usage

### 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.

## Variations

### 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](/layouts/stack#with-gutter) and [HTML](/layouts/stack/html#with-gutter) examples.