funkwhale/front/ui-docs/components/ui/layout.md

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.

<Layout flex>
  <Card title="A" style="width:100px; min-width:100px"></Card>
  <Card title="B" :tags="['funk', 'dunk', 'punk']"></Card>
  <Card title="C" style="width:100px; min-width:100px"></Card>
  <Card title="D"></Card>
</Layout>

::: info Use additional flexbox properties

Find a list of all styles here: Flexbox guide on css-tricks.com

--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):

<Layout grid :column-width=90>
  <Alert>A</Alert>
  <Alert>B</Alert>
  ...
</Layout>

A B C D E F G

Let elements span multiple rows or columns:

<Layout grid>
  <Card title="A" class="span-2-columns"></Card>
  <Card title="B"></Card>
  <Card title="C" class="span-2-rows"></Card>
  <Card title="D"></Card>
</Layout>

```vue
<Card class="span-2-columns"></Card>
```

```vue
<Card class="span-2-rows"></Card>
```

Add space between vertically stacked items

<Layout stack>
  <Card title="A"></Card>
  <Card title="B"></Card>
  <Card title="C"></Card>
  <Card title="D"></Card>
  <Card title="E"></Card>
</Layout>