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

🡔 Layout

Layout grid

Align items both vertically and horizontally. You can either specify the column width (default: 320px) or set the desired number of columns.

Override the :column-width (in px):

<Layout grid :column-width="90"
  :style="`width:${2 * 90 + 32}px`"
>
  <Alert yellow />
  <Card small title="brown" />
  <Alert blue />
</Layout>

Let elements span multiple rows or columns:

  <Alert purple style="grid-column: span 2;" />
  <Card title="2" style="grid-row: span 2;" />
  <Alert green />
  <Card title="1" />

Custom grid configuration

You can pass any valid CSS grid value to the grid prop:

<Layout grid="auto / repeat(auto-fit, minmax(min-content, 100px))">
  <Alert red />
  <Alert green />
  <Alert blue />
</Layout>