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

Layout section

---

Artist Name 13 tracks Artist Name 13 tracks Artist Name 13 tracks

<Layout grid="auto / repeat(auto-fit, calc(46px _ 3 + 32px _ 2))" v-bind="attributes"

<!-- The title row's width is a multiple of 3 rows -->
<Layout flex no-gap
    style="grid-column: 1 / -1; align-self: baseline;"
>
    <!-- Set distance between baseline and previous row -->
    <Spacer v
        :size="64"
        style="outline:1px solid red; align-self: baseline;"
    />
    <!-- Flexible row content -->
    <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
    <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
        Albums
    </h3>
    <Spacer grow />
    <Button ghost thin auto align-self="baseline"
        style="grid-column:-1;"
    >
        Show all
    </Button>
</Layout>

Artist Name 13 tracks Artist Name 13 tracks Artist Name 13 tracks Artist Name 13 tracks Artist Name 13 tracks

<Layout grid="auto / repeat(auto-fit, calc(46px _ 4 + 32px _ 3))" v-bind="attributes"

<Layout flex no-gap
    style="grid-column: 1 / -1; align-self: baseline;"
>
    <!-- Set distance between baseline and previous row -->
    <Spacer v
        :size="64"
        style="outline:1px solid red; align-self: baseline;"
    />
    <!-- Flexible row content -->
    <!-- Note that the `h3` uses its padding to create the 24px bottom gap -->
    <h3 style="align-self: baseline; padding:0  0 24px 10px; margin:0;">
        Tracks
    </h3>
    <Spacer grow />
    <Button ghost thin auto align-self="baseline"
        style="grid-column:-1;"
    >
        Show all
    </Button>
</Layout>