# 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/)
--gap: 4px
align-self: flex-end
flex-grow: 1
height: 5rem
width: 100%
:::
Align items both vertically and horizontally
##### Override the `:column-width` (in px):
```vue-html{1}
A
B
...
```
##### Let elements span multiple rows or columns:
```vue-html{2,4}
```
```vue
```
```vue
```
Add space between vertically stacked items
```vue-html
```