# Layout
CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.
## Apply presets
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.
## Add semantics
Add one of these props to your `Layout` component to turn them into semantic containers (without affecting their presentation):
**Headings:** [`"h1" | "h2" | "h3" | "h4" | "h5"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes)
**Sectioning:** [`"nav" | "aside" | "header" | "footer" | "main"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#usage_notes)
**Forms:** [`"label" | "form"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)
## Common props
### `no-gap`: Remove the gap between items
```vue
```
---
### 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
```
---
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](/components/ui/layout/flex)
Align items both vertically and horizontally
[Layout grid](/components/ui/layout/grid)
Add space between vertically stacked items
[Layout stack](/components/ui/layout/stack)
Let text and items flow like on a printed newspaper
[Layout columns](/components/ui/layout/columns)