# Layout
The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.
## Common props
### `no-gap`: Remove the gap between items
```vue
```
{{ noGap ? 'no-gap' : '-' }}
---
### Add fixed or flexible Spacers
::: info Only available on:
- **stack**
- **flex**
:::
If you add a spacer with attribute `grow`, it will push the other item until the Layout fills the available space. This only works if the parent element itself grows beyond its minimal contents.
```vue
```
{{ isGrowing ? 'grow' : '-' }}
---
Multiple spacers will distribute their growth evenly.
Note that you can set the minimum space occupied by the `Spacer` with its `size` prop [(docs)](./layout/spacer). Negative values can offset the gap of the `Layout` (but, due to a limitation of flexbox, not eat into the space occupied by adjacent items):
```vue
```
---
---
Items are laid out in a row and wrapped as they overflow the container
[Layout flex](./layout/flex)
Align items both vertically and horizontally
[Layout grid](./layout/grid)
Add space between vertically stacked items
[Layout stack](./layout/stack)
Let text and items flow like on a printed newspaper
[Layout columns](./layout/columns)