Layouts

Introducción

El sistema de grid de Filament te permite crear layouts responsivos y multicolumna usando cualquier componente de layout. Filament incluye varios componentes integrados:

• Grid
• Flex
• Fieldset
• Section
• Tabs
• Wizard

También puedes crear tus propios componentes de layout personalizados.

Sistema de grid

Todos los componentes de layout tienen un método columns() que puedes usar de dos formas:

• Pasando un entero, por ejemplo columns(2). Esto indica el número de columnas usadas a partir del breakpoint lg. En dispositivos más pequeños, siempre será 1 columna.
• Pasando un array, donde la clave es el breakpoint y el valor es el número de columnas. Ejemplo: columns(['md' => 2, 'xl' => 4]). En md tendrá 2 columnas, en xl tendrá 4. El valor por defecto para dispositivos pequeños es 1 columna, salvo que uses la clave default.

Breakpoints (sm, md, lg, xl, 2xl) están definidos por Tailwind, ver documentación oficial.

Details

💡 Nota sobre columnas dinámicas

Además de valores estáticos, columns() acepta funciones de callback. En estas puedes inyectar utilidades como parámetros (por ejemplo $get, $set, etc.).

Span de columnas

Además de establecer cuántas columnas tiene un layout, puedes decidir cuántas columnas ocupa cada componente dentro de ese grid con columnSpan():

• columnSpan(2) → ocupa 2 columnas en todos los breakpoints.
• columnSpan(['md' => 2, 'xl' => 4]) → ocupa 2 columnas en md y 4 en xl.
• columnSpan('full') o columnSpanFull() → ocupa todo el ancho del grid.

Details

💡 Nota sobre span dinámico

columnSpan() también acepta callbacks con utilidades inyectables.

Column start

Controla en qué columna empieza un componente dentro del grid con columnStart():

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Grid;

Grid::make()
    ->columns(['sm' => 3,'xl' => 6,'2xl' => 8])
    ->schema([
        TextInput::make('name')
            ->columnStart(['sm' => 2,'xl' => 3,'2xl' => 4]),
    ])

Details

💡 Nota sobre inicio dinámico

columnStart() acepta funciones con utilidades inyectadas.

Orden visual de columnas

Puedes manipular el orden visual de los elementos sin cambiar el orden en el markup con columnOrder():

Grid::make()->columns(3)->schema([
    TextInput::make('first')->columnOrder(3),
    TextInput::make('second')->columnOrder(1),
    TextInput::make('third')->columnOrder(2),
])

En este ejemplo: primero second, luego third, finalmente first.

Details

💡 Nota sobre orden dinámico

columnOrder() acepta closures que calculan dinámicamente el orden.

Ejemplo completo

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make()
    ->columns(['sm' => 3,'xl' => 6,'2xl' => 8])
    ->schema([
        TextInput::make('name')
            ->columnSpan(['sm' => 2,'xl' => 3,'2xl' => 4])
            ->columnOrder(['default' => 2,'xl' => 1]),
        TextInput::make('email')
            ->columnSpan(['default' => 1,'xl' => 2])
            ->columnOrder(['default' => 1,'xl' => 2]),
    ])

Componentes básicos de layout

Grid

Funciona igual que otros layouts pero con sintaxis explícita:

use Filament\Schemas\Components\Grid;

Grid::make(['default' => 1,'sm' => 2,'md' => 3,'lg' => 4,'xl' => 6,'2xl' => 8])
    ->schema([
        // ...
    ])

Flex

Define layouts con flexbox y anchos flexibles:

Flex::make([
    Section::make([TextInput::make('title'),Textarea::make('content')]),
    Section::make([Toggle::make('is_published'),Toggle::make('is_featured')])->grow(false),
])->from('md')

Details

💡 Nota sobre grow() y from()

Estos métodos también aceptan funciones con utilidades.

Fieldset

Agrupa campos con borde y etiqueta:

Fieldset::make('Label')->columns(['default' => 1,'md' => 2,'xl' => 3])

Details

💡 Nota sobre make()

Puedes pasar una función en lugar de un label fijo.

Puedes remover el borde con contained(false).

Container queries

También puedes usar container queries:

Grid::make()->gridContainer()->columns(['@md' => 3,'@xl' => 4])

Soporta fallback con !@ para navegadores antiguos. Ejemplo:

Grid::make()
    ->gridContainer()
    ->columns(['@md' => 3,'@xl' => 4,'!@md' => 2,'!@xl' => 3])

Atributos extra HTML

Puedes pasar atributos HTML extra con extraAttributes():

Section::make()
    ->extraAttributes(['class' => 'custom-section-style'])

Por defecto sobrescribe, pero se puede hacer merge con merge: true.