PHPackages codenco-dev/nova-grid-system - 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. [Utility & Helpers](/categories/utility) 4. / 5. codenco-dev/nova-grid-system ActiveLibrary[Utility & Helpers](/categories/utility) codenco-dev/nova-grid-system ============================ A Laravel Nova tool to have a grid system v2.0.1(3y ago)80300.1k↑57%39[18 issues](https://github.com/codenco-dev/nova-grid-system/issues)[2 PRs](https://github.com/codenco-dev/nova-grid-system/pulls)MITPHPPHP >=7.1.0 Since May 18Pushed 2y ago5 watchersCompare [ Source](https://github.com/codenco-dev/nova-grid-system)[ Packagist](https://packagist.org/packages/codenco-dev/nova-grid-system)[ RSS](/packages/codenco-dev-nova-grid-system/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (3)Versions (13)Used By (0) \#Nova grid system for Laravel Nova Install ------- [](#install) You can install this package via composer: ``` composer require codenco-dev/nova-grid-system ``` Then, you will need to register the tool within the NovaServiceProvider.php: ``` use CodencoDev\NovaGridSystem\NovaGridSystem; /** * Get the tools that should be listed in the Nova sidebar. * * @return array */ public function tools() { return [ //other tools new NovaGridSystem ]; } ``` How to use? ----------- [](#how-to-use) This package allows you to define field sizes for detail, update or resource creation pages with tailwind CSS classes. ### Like I want [](#like-i-want) You can use the `size` method on your field to add a meta property for each page. All Tailwind fluid classes for size can be used. See ### Where I want [](#where-i-want) If you don't want to change the size of fields on each page, you can use methods to filter the effect: - `sizeOnCreating` - `sizeOnUpdating` - `sizeOnForms` - `sizeOnDetail` ### Stacked or not stacked... [](#stacked-or-not-stacked) Automatically, with the default configuration, the field labels are stacked. If you don't want this, you can use the `stacked` method with a parameter value of `false`. As for previous point, you can do it wherever you want with: - `stackedOnCreating` - `stackedOnUpdating` - `stackedOnForms` - `stackedOnDetail` ### Damn ! There is a bottom border [](#damn--there-is-a-bottom-border) On the detail page, Nova automatically remove its lower border for the last field. In this package, it's not possible to calculate the last field, so you can delete it yourself. You can use these methods: - `removeBottomBorderOnCreating` - `removeBottomBorderOnUpdating` - `removeBottomBorderOnForms` - `removeBottomBorderOnDetail` ### Example [](#example) This code uses the simplest method of configuration:: ``` public function fields(Request $request) { return [ ID::make()->sortable(), Gravatar::make()->maxWidth(50), Text::make('Name') ->size('w-1/3') ->sortable() ->rules('required', 'max:255'), Text::make('Email') ->size('w-1/3') ->sortable() ->rules('required', 'email', 'max:254') ->creationRules('unique:users,email') ->updateRules('unique:users,email,{{resourceId}}'), Password::make('Password') ->size('w-1/3') // Only on forms, because we use onlyOnForms method with ->onlyOnForms() ->creationRules('required', 'string', 'min:8') ->updateRules('nullable', 'string', 'min:8'), ]; } ``` In this previous example, sizes are ok in forms pages but not in detail pages. This code presents several configurations depending on the context and uses different methods ``` /** * Get the fields displayed by the resource. * * @param \Illuminate\Http\Request $request * @return array */ public function fields(Request $request) { return [ ID::make()->sortable(), Gravatar::make()->maxWidth(50), Text::make('Name') ->sizeOnDetail('w-1/2') ->stackedOnDetail(false) ->sizeOnForms('w-1/3') ->sortable() ->rules('required', 'max:255'), Text::make('Email') ->sizeOnDetail('w-1/2') ->stackedOnDetail(false) ->sizeOnForms('w-1/3') ->sortable() ->rules('required', 'email', 'max:254') ->creationRules('unique:users,email') ->updateRules('unique:users,email,{{resourceId}}'), Password::make('Password') ->size('w-1/3') // Only on forms, because we use onlyOnForms method with ->onlyOnForms() ->creationRules('required', 'string', 'min:8') ->updateRules('nullable', 'string', 'min:8'), Date::make('Created At') ->hideWhenCreating() ->size('w-1/2') ->stacked(false) ->stackedOnForms(true) ->removeBottomBorderOnForms(), Date::make('Updated At') ->hideWhenCreating() ->size('w-1/2') ->stacked(false) ->stackedOnForms(true) ->removeBottomBorderOnForms(), Badge::make('Status 1', function () { return 'info'; })->size('w-1/6')->removeBottomBorder(), Badge::make('Status 2', function () { return 'success'; })->size('w-1/6')->removeBottomBorder(), Badge::make('Status 3', function () { return 'warning'; })->size('w-1/6')->removeBottomBorder(), Badge::make('Status 4', function () { return 'info'; })->size('w-1/6')->removeBottomBorder(), Badge::make('Status 5', function () { return 'success'; })->size('w-1/6')->removeBottomBorder(), Badge::make('Status 6', function () { return 'warning'; })->size('w-1/6')->removeBottomBorder(), ]; } ``` ### Play with default values [](#play-with-default-values) Do you want go fast to configure your app ? With the `HasDefaultSize` trait, you can use defined default values. You can use this trait in each resource where you want or on the `App\Nova\Resource` file if you want have default values on each resource automatically. You be able to define default values on several ways : - by defining their on config file - by creating different methods acting, as the case may be (detail, creating, updating) like this : ``` public function defaultFieldSize() { return 'w-1/8'; } ``` Methods can be : `defaultFieldSize`,`defaultFieldSizeOnDetail`,`defaultFieldSizeOnCreating`,`defaultFieldSizeOnUpdating`. ### Configuration [](#configuration) You can disable each "automatic" feature for each type of page with the `nova-grid-system.php` config file. You can define default sizes for every fields. To publish it, you can use this command: ``` php artisan vendor:publish --tag="nova-grid-system" ``` License ------- [](#license) The MIT License (MIT). Please see License File for more information. About ----- [](#about) This package is inspired by a deleted package by Eduardo Geschonke ### Health Score 40 — FairBetter than 88% of packages Maintenance16 Infrequent updates — may be unmaintained Popularity52 Moderate usage in the ecosystem Community19 Small or concentrated contributor base Maturity58 Maturing project, gaining track record Bus Factor1 Top contributor holds 54.1% 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 Every ~91 days Recently: every ~227 days Total 12 Last Release 1184d ago Major Versions 0.9.2 → 1.0.02020-07-06 1.0.5 → v2.0.02022-08-24 ### Community Maintainers ![](https://www.gravatar.com/avatar/19ce7305c373d4ab9f6633a2d2ddb3693ae27a1fdd2897244a6e3e4c9760d581?d=identicon)[DomThomas-Dev](/maintainers/DomThomas-Dev) --- Top Contributors [![domthomas-dev](https://avatars.githubusercontent.com/u/17202290?v=4)](https://github.com/domthomas-dev "domthomas-dev (20 commits)")[![ali-raza-saleem](https://avatars.githubusercontent.com/u/88083032?v=4)](https://github.com/ali-raza-saleem "ali-raza-saleem (14 commits)")[![orlyapps](https://avatars.githubusercontent.com/u/5220826?v=4)](https://github.com/orlyapps "orlyapps (2 commits)")[![crynobone](https://avatars.githubusercontent.com/u/172966?v=4)](https://github.com/crynobone "crynobone (1 commits)") --- Tags laravelgridlayoutnova ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/codenco-dev-nova-grid-system/health.svg) ``` [![Health](https://phpackages.com/badges/codenco-dev-nova-grid-system/health.svg)](https://phpackages.com/packages/codenco-dev-nova-grid-system) ``` ### Alternatives [optimistdigital/nova-sortable This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop. 2872.1M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-sortable This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop. 2861.8M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-multiselect-field A multiple select field for Laravel Nova. 3403.5M7](/packages/optimistdigital-nova-multiselect-field)[outl1ne/nova-grid A Laravel Nova tool that allows placing fields in a grid using ->size() helpers. 1017.6k](/packages/outl1ne-nova-grid)[sbine/route-viewer A Laravel Nova tool to view your registered routes. 57215.9k](/packages/sbine-route-viewer)[markwalet/nova-modal-response A Laravel Nova asset for Modal responses on an action. 14720.0k](/packages/markwalet-nova-modal-response) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)