Multi-Column Layouts

Templates

It is possible to easily control the layout of pages by using Tailwind's grid columns.

To help with this, we have added some templates in the form of first-party components:

Two-column:

<x-apex::layout.pages.twoColumn>
    <x-slot:leftColumn>
        // Left-column content.
    </x-slot>
    <x-slot:rightColumn>
        // Right-column content.
    </x-slot>
</x-apex::layout.pages.twoColumn>

Three-column:

<x-apex::layout.pages.threeColumn>
    <x-slot:leftColumn>
        // Left-column content.
    </x-slot>
    <x-slot:middleColumn>
        // Middle-column content.
    </x-slot>
    <x-slot:rightColumn>
        // Right-column content.
    </x-slot>
</x-apex::layout.pages.threeColumn>

Custom Layouts

If you require more control than these templates offer, you are free to create your own layouts using the component parts. You can customise the number of columns, gap size and column spans for both mobile and desktop.

Simple:

<x-apex::layout.columns.container class="dd">
    <x-apex::layout.columns.column column-size=2>
        1 - 2
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size=3>
        3 - 5
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size=2>
        6 - 7
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column>
        8
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column>
        9
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column>
        10
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column>
        11
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column>
        12
    </x-apex::layout.columns.column>
</x-apex::layout.columns.container>

Advanced:

<x-apex::layout.columns.container
    max-width="3xl"
    number-of-columns="8"
    gap-size="sm"
    class="dd"
>
    <x-apex::layout.columns.column column-size=2>
        1
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size=4>
        2
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size=2>
        3
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size-desktop=8>
        4
    </x-apex::layout.columns.column>
    <x-apex::layout.columns.column column-size-desktop=8>
        5
    </x-apex::layout.columns.column>
</x-apex::layout.columns.container>