```ts
import Section from '~/components/ui/Section.vue'
```
# Layout section
Sections divide the page vertically. Choose an appropriate heading level for each section.
You can use all props for [Heading](../heading.md), including `h1` to `h6` and [stylistic variants](../heading.md#visual-sizes-for-page-sections-and-subsections) such as `radio` or `page-heading`.
```vue-html
```
```vue-html
```
## Align the section
```vue-html
```
### Make the section header align with the section contents
The section aligns its title and items to a grid, following the designs. To make sure the header of a section exactly aligns with its contents, set the item width (in number of columns). For example,
```vue-html
:columns-per-item="1"
```
```vue-html
:columns-per-item="3"
```
```vue-html
:columns-per-item="4"
```
For a complete overview of column widths for common funkwhale components, see [the table in using-width](../using-width.md#widths-in-the-grid)
### Move individual items within and across grid-cells
For child items, you can use all known CSS grid placement techniques:
```css
grid-column: 1 / -1;
```
Fill the whole grid, no matter how wide the screen is
```css
grid-row: span 3
```
```css
align-self: start;
justify-self: center;
```
Place individual items to the edge of their current cell or cells
## Provide an action
The link or button will be shown on the right side of the header. Use `action.text` to set the label (required).
You can use all [`Link` props](../link.md) or [`Button` props](../button.md) inside the `action` prop! Note that the button or link label will be in line with the heading.
```vue-html
```
## Add icons and slots
```vue-html
```
## Set gaps between consecutive sections
Place consecutive sections into a [Layout stack](../layout) with a 64px gap (`gap-64`) to give them a regular vertical rhythm. Use different sizes for very small or very large headings.
Note the spacer above the layout. By default, sections begin at the baseline of the heading. This enables us to explicitly define the vertical rhythm, independently of the heading's line height.
## Mix sections of different item widths
```vue-html
Artist Name
Artist Name
Artist Name
```
---
Artist Name
Artist Name
Artist Name
## Collapse and expand the section
By adding either `collapse` or `expand` to the props, you add Accordion behavior to the section.
The heading will become a clickable button.
```ts
const sections = ref([false, false, false])
```
```vue-html
```
## Responsivity
- Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For `Card`, it is `3` and for `Activity`, it is `4`.
- On a typical laptop screen, you may have 4 album cards or 3 activities side-by-side. On a typical mobile screen, you will have one medium card or two small ones in a row.
- The remaining space is evenly distributed.
- Title rows align with the content below them. The action on the right will always end with the last item in the grid. Resize the window to observe how the items move.