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

🡔 Layout

Layout columns

Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.

<Layout columns :column-width="120">
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

  <Card min-content title="Cards...">...break over columns...</Card>

  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
</Layout>

---

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

---

...break over columns...

---

Make sure that all elements fit the column width, else they will leak into the neighboring columns.

no-rule: Remove the rule (thin line) between columns

<Layout columns :colummn-width="50">
  <div>Lorem ipsum dolor sit amet.</div>
</Layout>

<Layout columns :colummn-width="50" no-rule>
  <div>Lorem ipsum dolor sit amet.</div>
</Layout>

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Tricks

Prevent column breaks

Add the following style to the element that you want to preserve whole:

style="break-inside: avoid;"