An example of a responsive grid layout

An example of a responsive grid layout

In this example, we have an infolist with a section layout component. Since all layout components support the columns() method, we can use it to create a responsive grid layout within the section itself.

We pass an array to columns() as we want to specify different numbers of columns for different breakpoints. On devices smaller than the sm Tailwind breakpoint, we want to have 1 column, which is default. On devices larger than the sm breakpoint, we want to have 3 columns. On devices larger than the xl breakpoint, we want to have 6 columns. On devices larger than the 2xl breakpoint, we want to have 8 columns.

Inside the section, we have a text entry. Since text entries are infolist components and all form components have a columnSpan() method, we can use it to specify how many columns the text entry should fill. On devices smaller than the sm breakpoint, we want the text entry to fill 1 column, which is default. On devices larger than the sm breakpoint, we want the text entry to fill 2 columns. On devices larger than the xl breakpoint, we want the text entry to fill 3 columns. On devices larger than the 2xl breakpoint, we want the text entry to fill 4 columns.

use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;
 
Section::make()
    ->columns([
        'sm' => 3,
        'xl' => 6,
        '2xl' => 8,
    ])
    ->schema([
        TextEntry::make('name')
            ->columnSpan([
                'sm' => 2,
                'xl' => 3,
                '2xl' => 4,
            ]),
        // ...
    ])