PHPackages accelade/grids - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. accelade/grids ActiveLibrary[Templating & Views](/categories/templating) accelade/grids ============== Grid components for Accelade - display data in cards, masonry layouts, and responsive grids v1.0.0(3mo ago)00[3 PRs](https://github.com/accelade/grids/pulls)MITBladePHP ^8.2CI passing Since Jan 19Pushed 1mo agoCompare [ Source](https://github.com/accelade/grids)[ Packagist](https://packagist.org/packages/accelade/grids)[ Docs](https://github.com/accelade/grids)[ GitHub Sponsors](https://github.com/fadymondy)[ RSS](/packages/accelade-grids/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (11)Versions (5)Used By (0) Accelade Grids ============== [](#accelade-grids) **Card-based Grid Layouts for Laravel. Zero Complexity.** [![Tests](https://github.com/accelade/grids/actions/workflows/tests.yml/badge.svg)](https://github.com/accelade/grids/actions/workflows/tests.yml)[![Latest Version](https://camo.githubusercontent.com/6db84cc1e7b46e670809003019a2f87755284f03ad72b49d0adffc82f748d435/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616363656c6164652f6772696473)](https://packagist.org/packages/accelade/grids)[![Total Downloads](https://camo.githubusercontent.com/1957328c5fae8c3c2fc408fec71e1720ad70ca70deee9568d00039b60436f7e2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616363656c6164652f6772696473)](https://packagist.org/packages/accelade/grids)[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE) --- Build beautiful, responsive card grids with minimal code. Accelade Grids provides powerful components for displaying data in cards, masonry layouts, and responsive grids. ``` use Accelade\Grids\Grid; use Accelade\Grids\Cards\Card; use App\Models\Product; $grid = Grid::make('products') ->query(Product::query()) ->columns(3) ->card( Card::make() ->title(fn ($record) => $record->name) ->description(fn ($record) => $record->description) ->image(fn ($record) => $record->image_url) ->url(fn ($record) => route('products.show', $record)) ) ->fromRequest() ->paginate(); ``` **That's it.** Render with ``. --- Why Accelade Grids? ------------------- [](#why-accelade-grids) - **Filament-Compatible API** - Familiar syntax if you use Filament - **Responsive Layouts** - Automatic column adjustments for different screen sizes - **Masonry Support** - Pinterest-style staggered layouts - **Cards** - Flexible card templates with images, titles, descriptions, badges - **Card Sections** - Display key-value pairs within cards - **Actions** - Support for row actions on each card - **Pagination** - Built-in pagination support - **Filters** - Apply filters to narrow results (via Query Builder) - **Search** - Full-text search support - **Sorting** - Sortable columns - **Dark Mode** - Built-in dark mode support --- Quick Start ----------- [](#quick-start) ``` composer require accelade/grids ``` The service provider will be automatically registered. ### Publish Configuration [](#publish-configuration) ``` php artisan vendor:publish --tag=grids-config ``` --- Features at a Glance -------------------- [](#features-at-a-glance) ### Basic Grid [](#basic-grid) ``` use Accelade\Grids\Grid; use Accelade\Grids\Cards\Card; use App\Models\Product; $grid = Grid::make('products') ->query(Product::query()) ->columns(4) ->gap('6') ->card( Card::make() ->title(fn ($record) => $record->name) ->description(fn ($record) => Str::limit($record->description, 100)) ->image(fn ($record) => $record->image_url) ->url(fn ($record) => route('products.show', $record)) ); ``` ### Card with Sections [](#card-with-sections) ``` use Accelade\Grids\Cards\Card; use Accelade\Grids\Cards\CardSection; Card::make() ->title(fn ($record) => $record->name) ->description(fn ($record) => $record->excerpt) ->sections([ CardSection::make() ->label('Price') ->value(fn ($record) => '$' . number_format($record->price, 2)) ->icon('heroicon-o-currency-dollar') ->color('success'), CardSection::make() ->label('Stock') ->value(fn ($record) => $record->stock . ' available') ->icon('heroicon-o-cube'), ]); ``` ### Card with Badge and Actions [](#card-with-badge-and-actions) ``` use Accelade\Grids\Cards\Card; use Accelade\Actions\ViewAction; use Accelade\Actions\EditAction; use Accelade\Actions\DeleteAction; Card::make() ->title(fn ($record) => $record->name) ->badge(fn ($record) => $record->is_featured ? 'Featured' : null, 'primary') ->actions([ ViewAction::make(), EditAction::make(), DeleteAction::make(), ], position: 'footer'); ``` ### Responsive Columns [](#responsive-columns) ``` // Fixed columns $grid->columns(4); // Responsive columns $grid->columns([ 'default' => 1, 'sm' => 2, 'md' => 3, 'lg' => 4, 'xl' => 5, ]); ``` ### Masonry Layout [](#masonry-layout) ``` $grid = Grid::make('gallery') ->query(Photo::query()) ->masonry() ->columns(4); ``` ### List Layout [](#list-layout) ``` $grid = Grid::make('articles') ->query(Article::query()) ->list(); // Single column list ``` ### With Header [](#with-header) ``` $grid = Grid::make('products') ->heading('Product Gallery') ->description('Browse our collection') ->headerActions([ CreateAction::make(), ExportAction::make(), ]); ``` ### Empty State [](#empty-state) ``` $grid = Grid::make('products') ->emptyStateHeading('No products found') ->emptyStateDescription('Try adjusting your search or filters') ->emptyStateIcon('heroicon-o-cube') ->emptyStateActions([ CreateAction::make()->label('Create Product'), ]); ``` ### Blade Component [](#blade-component) ``` ``` --- Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11.x or 12.x - accelade/accelade ^1.0 - accelade/query-builder ^1.0 - accelade/filters ^1.0 - accelade/actions ^1.0 --- Documentation ------------- [](#documentation) GuideDescription[Overview](docs/overview.md)Introduction and basic concepts[Cards](docs/cards.md)Card component configuration[Layouts](docs/layouts.md)Grid layout options[Filters](docs/filters.md)Filtering and search--- Accelade Ecosystem ------------------ [](#accelade-ecosystem) Accelade Grids is part of the Accelade ecosystem: PackageDescription**[accelade/accelade](https://github.com/accelade/accelade)**Core reactive Blade components**[accelade/schemas](https://github.com/accelade/schemas)**Schema-based layouts**[accelade/forms](https://github.com/accelade/forms)**Form builder with validation**[accelade/infolists](https://github.com/accelade/infolists)**Display read-only data**[accelade/tables](https://github.com/accelade/tables)**Data tables with filtering**[accelade/actions](https://github.com/accelade/actions)**Action buttons with modals**[accelade/widgets](https://github.com/accelade/widgets)**Dashboard widgets**[accelade/grids](https://github.com/accelade/grids)**Card-based grids (this package)**[accelade/query-builder](https://github.com/accelade/query-builder)**Query builder utilities**[accelade/filters](https://github.com/accelade/filters)**Filter components--- License ------- [](#license) MIT License. See [LICENSE](LICENSE) for details. ### Health Score 37 — LowBetter than 83% of packages Maintenance84 Actively maintained with recent releases Popularity0 Limited adoption so far Community8 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 55.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 119d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2147eb2fca7ab5f0124d0fafd88ba2d2a5dfa3a0036fb8872d1084b7cba29366?d=identicon)[fadymondy](/maintainers/fadymondy) --- Top Contributors [![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![fadymondy](https://avatars.githubusercontent.com/u/11937812?v=4)](https://github.com/fadymondy "fadymondy (4 commits)") --- Tags laravelbladegallerymasonrycardsgridsaccelade ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/accelade-grids/health.svg) ``` [![Health](https://phpackages.com/badges/accelade-grids/health.svg)](https://phpackages.com/packages/accelade-grids) ``` ### Alternatives [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[radic/blade-extensions Laravel package providing additional Blade extensions: foreach (with $loop data like twig), break, continue, set,array (multiline), etc 271321.7k5](/packages/radic-blade-extensions) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)