Filament•5w ago

change direction (from column to row) of a section within a grid

hi all, im looking to implement a different alignment to a section inside my form. i am displaying images inside a grid and need to change the alignment. the default seems to be a column but i want to have a horizontal direction.

                Grid::make(2)
                    ->schema([
                        SpatieMediaLibraryFileUpload::make('featured_image')
                            ->collection('featured')
                            ->image()
                            ->columnSpanFull(),
                        SpatieMediaLibraryFileUpload::make('images')
                            ->collection('images')
                            ->multiple()
                            ->extraAttributes(['class' => 'flex flex-row'])
                            ->columnSpanFull()
                    ])->columnSpan([
                        'default' => 1,
                        'sm' => 12,
                        'md' => 8,
                        'lg' => 7,
                    ]),

                Grid::make(2)
                    ->schema([
                        SpatieMediaLibraryFileUpload::make('featured_image')
                            ->collection('featured')
                            ->image()
                            ->columnSpanFull(),
                        SpatieMediaLibraryFileUpload::make('images')
                            ->collection('images')
                            ->multiple()
                            ->extraAttributes(['class' => 'flex flex-row'])
                            ->columnSpanFull()
                    ])->columnSpan([
                        'default' => 1,
                        'sm' => 12,
                        'md' => 8,
                        'lg' => 7,
                    ]),

the grid layout i want to create is a 1 column design with its rows expanding across the available space but, have the images within the lower row, to sit next to each other. i've tried using something like this:

->extraAttributes(['class' => 'flex'])

->extraAttributes(['class' => 'flex'])

or by creating a CSS class within

resources/css/app.css

resources/css/app.css

does a theme cover this need or is it only for editing colors and typography? thanks!

2 Replies

awcodes•5w ago

Try ->panelLayout(‘grid’)

warpigOP•5w ago

amazing 😄 thanks @awcodes

Gaming

Programming

change direction (from column to row) of a section within a grid

Did you find this page helpful?