How to make a two column layout?

[bartclaeys]

It's unclear to me how to make a two-column layout like this:

Starting from this code:

    public static function form(Form $form): Form
    {
        return $form->schema([
            Card::make()->schema([
                Grid::make(['default' => 0])->schema([
                //...
                ]),
            ]),
        ]);
    }

Somehow I need to add this:

Grid::make(2)
    ->schema([
        // ...
    ])

But this doesn't work, what I get is two cards underneath each other:

$form->schema([Grid::make(2)
       ->schema([
            Card::make()->schema([
                //...
            ]),
            Card::make()->schema([
                //...
            ])
       ])
    ])

[danharrin]

Like this - https://github.com/filamentphp/demo/blob/b00958f0bf4d91a5ab51b84c6117c4cfb346a8bd/app/Filament/Resources/Shop/BrandResource.php#L30-L74

We also hide the second column if the record doesnt exist yet

[bartclaeys]

Thanks, copied and pasted the exact code, still doesn't work. Can you elaborate more what should make this a two-column layout?

I assume it is this part:

->columns(3);
Can this be made responsive like with grid? My current browser width is 1633px.

[danharrin]

Yes you can use a responsive array, like in our docs

[bartclaeys]

When I copy the code linked above for 100%, I still don't get two columns.

I've then specified with below, still nothing.

->columns([
                'default' => 2
            ]);

The two cards always appear underneath each other.

[bartclaeys]

Here is an exact copy and paste of the code that does not result in two-column layout on 1633px wide screen.

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Card::make()
                    ->schema([
                        Forms\Components\Grid::make()
                            ->schema([
                                Forms\Components\TextInput::make('name')
                                    ->required()
                                    ->lazy()
                                    ->afterStateUpdated(fn (string $context, $state, callable $set) => $context === 'create' ? $set('slug', Str::slug($state)) : null),

                                Forms\Components\TextInput::make('slug')
                                    ->disabled()
                                    ->required()
                                    ->unique(Brand::class, 'slug', ignoreRecord: true),
                            ]),
                        Forms\Components\TextInput::make('website')
                            ->required()
                            ->url(),

                        Forms\Components\Toggle::make('is_visible')
                            ->label('Visible to customers.')
                            ->default(true),

                        Forms\Components\MarkdownEditor::make('description')
                            ->label('Description'),
                        ]),
                Forms\Components\Card::make()
                    ->schema([
                        Forms\Components\Placeholder::make('created_at')
                            ->label('Created at'),

                        Forms\Components\Placeholder::make('updated_at')
                            ->label('Last modified at'),
                    ])
                    ->columnSpan(['lg' => 1])
            ])
            ->columns([
                'default' => 2
            ]);
    }

[danharrin]

Have you used mobile-first CSS grid before? check the Tailwind classes that are being output in the HTML. What's wrong with them? I could do the work for you and tell you the answer but its probably better if you understand and debug yourself

[bartclaeys]

Figured it out. In case other people run into the same problem:

To create a two column layout with cards next to each other, you need to combine columns() with columnSpan(), otherwise nothing will happen. Additionally, you only need Grid::make() if you want to create columns within a card.

So, first set eg. columns(3), then nested within use columnSpan(2) and columnSpan(1).

[psirus0588]

I think, this documentation solve your problem:
https://filamentphp.com/docs/3.x/forms/layout/split