Filament•13mo ago

How to make two column section using grid?

Hello everyone, I just want to ask how do I make a 2 column section using grid? I have set the columns in small size to 1 then medium 2 but it just show full width of two columns:

Forms\Components\Grid::make()
    ->columns([
        'sm' => 1,
        'md' => 2
    ])
    ->schema([
        Forms\Components\Section::make('Sync Schedule')
            ->schema([
                Forms\Components\Placeholder::make('action')
                    ->label('Sync Here')
                    ->content($this->integration->name)
            ]),
        Forms\Components\Section::make('Sync Schedule')
            ->schema([
                Forms\Components\Placeholder::make('action')
                    ->label('Sync Here')
                    ->content($this->integration->name)
            ]),
    ]),

Forms\Components\Grid::make()
    ->columns([
        'sm' => 1,
        'md' => 2
    ])
    ->schema([
        Forms\Components\Section::make('Sync Schedule')
            ->schema([
                Forms\Components\Placeholder::make('action')
                    ->label('Sync Here')
                    ->content($this->integration->name)
            ]),
        Forms\Components\Section::make('Sync Schedule')
            ->schema([
                Forms\Components\Placeholder::make('action')
                    ->label('Sync Here')
                    ->content($this->integration->name)
            ]),
    ]),

4 Replies

Vp•13mo ago

According to docs, Section has ->columns([]) and Grid have this

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

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

https://filamentphp.com/docs/3.x/forms/layout/grid#grid-component

Grid - Form Builder - Filament

jaoceroOP•13mo ago

Doesn't work 😦 It works with different components like text field, select etc it will make two columns but when I tried two sections solumn it will make full width

jaoceroOP•13mo ago

Forms\Components\Grid::make()
    ->columns([
        'sm' => 1,
        'md' => 2
    ])
    ->schema([
        Forms\Components\Placeholder::make('action')
            ->label('Sync Here')
            ->content($this->integration->name),
        Forms\Components\Placeholder::make('action')
            ->label('Sync Here')
            ->content($this->integration->name)
    ]),

Forms\Components\Grid::make()
    ->columns([
        'sm' => 1,
        'md' => 2
    ])
    ->schema([
        Forms\Components\Placeholder::make('action')
            ->label('Sync Here')
            ->content($this->integration->name),
        Forms\Components\Placeholder::make('action')
            ->label('Sync Here')
            ->content($this->integration->name)
    ]),

Vp•13mo ago

Yes, you're correct. I just test and I got the same issue, I don't know what exactly you want but my suggestion is just use section without grid.. or use grid without section

Gaming

Programming

How to make two column section using grid?