# 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.
Items are laid out in a row and wrapped as they overflow the container.
By default, all items in a row assume the same (maximum) height.
```vue-html
```
::: info Use additional `flexbox` properties
Find a list of all styles here: [Flexbox guide on css-tricks.com](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
:::
Align items both vertically and horizontally
##### Override the `:column-width` (in px):
```vue-html{1}
AB
...
```
ABCDEFG
##### Let elements span multiple rows or columns:
```vue-html{2,4}
```
```vue
```
```vue
```
Add space between vertically stacked items
```vue-html
```
Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
```vue-html
```
## Common props
### `no-gap`: Remove the gap between items
```vue
```
{{ noGap ? 'no-gap' : '-' }}
---
### Add fixed or flexible Spacers
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
ABC (footer)
```
{{ isGrowing ? 'grow' : '-' }}
---
ABC (footer)
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`:
```vue