PHPackages zen0x7/gridder - 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. zen0x7/gridder ActiveLibrary[Utility & Helpers](/categories/utility) zen0x7/gridder ============== A Laravel Nova field. 1.0.4(9mo ago)12392MITVuePHP ^8.1 Since Jan 6Pushed 9mo ago1 watchersCompare [ Source](https://github.com/Zen0x7/Gridder)[ Packagist](https://packagist.org/packages/zen0x7/gridder)[ RSS](/packages/zen0x7-gridder/feed)WikiDiscussions master Synced 1w ago READMEChangelog (5)Dependencies (3)Versions (6)Used By (0) Gridder ======= [](#gridder) A couple of years ago i decide to build `nova-gridder`, probably inspired in other developer repository. By the way, that was abandoned, for several reasons, this is a Nova 5 compatible, fresh grid system implementation based on tailwindcss. There are no goals to reach some point of development. [![Gridder Usage](./result.png)](./result.png) Installation ------------ [](#installation) As is usually, you need to install it using composer: ``` composer require zen0x7/gridder ``` Usage ----- [](#usage) ### Basic Usage [](#basic-usage) ``` public static function fields() { return [ Panel::make(__('Details'), [ Text::make(__('Name'), 'name') ->withMeta([ "gridder" => [ "cols" => Gridder::$FIELD_ONE_OF_TWO_COLUMNS, "type" => "stack" ] ]) ])->withMeta([ "gridder" => [ "cols" => Gridder::$GRID_STATIC_TWO_COLUMNS ] ]) ] } ``` Digging deep ------------ [](#digging-deep) Basically works with `meta`, you should to define columns per `field` and `panel`. Cols attribute is something like, of course, they are `responsive breakpoints`: ``` $cols = [ "default" => 1, // On default should use 1 column "sm" => 2, // When device is on "sm" then use 2 columns (span) "md" => 2, // The same for the next ... "lg" => 2, "xl" => 2, "2xl" => 2, ] ``` Advanced usage -------------- [](#advanced-usage) If you want to use the `gridder` to take more advantage then: Consider the following `Panel` meta attribute value: > Check the comments ... ``` $meta = [ "gridder => [ "default" => 1, // means "grid-cols-1" "sm" => 2, // means "sm:grid-cols-2" "md" => 3, // means "md:grid-cols-3" "lg" => 6, // means "lg:grid-cols-6" "xl" => 12, // means "xl:grid-cols-12" "2xl" => 12, // means "2xl:grid-cols-12" ] ] ``` Right now, you could assign `Field` meta attribute value: ``` $meta = [ "gridder => [ "default" => 1, // This means "col-span-1", if there are 1 column available, then will use "100%" "sm" => 1, // This means "sm:col-span-1", if at "sm" are 2 columns available, then will use "1/2" "md" => 1, // This means "md:col-span-1", if at "md" are 3 columns available, then will use "1/3" "lg" => 3, // This means "lg:col-span-3", if at "lg" are 6 columns available, then will use "1/2" "xl" => 3, // This means "xl:col-span-3", if at "xl" are 12 columns available, then will use "1/4" "2xl" => 3, // This means "2xl:col-span-3", if at "2xl" are 12 columns available, then will use "1/4" ] ] ``` How to deal simple as possible, create your own `X` class and define arrays to create custom cols configurations. ``` namespace App\Nova\Grids; class TwoColumns { public static array $GRID = [ "default" => 1, "sm" => 2, "md" => 2, "lg" => 2, "xl" => 2, "2xl" => 2, ]; public static array $FULL = [ "default" => 1, "sm" => 2, "md" => 2, "lg" => 2, "xl" => 2, "2xl" => 2, ]; public static array $HALF = [ "default" => 1, "sm" => 1, "md" => 1, "lg" => 1, "xl" => 1, "2xl" => 1, ]; } ``` And after that, basically, use it on `gridder` like: ``` use App\Nova\Grids\TwoColumns; public static function fields() { return [ Panel::make(__('Details'), [ Text::make(__('First Name'), 'first_name') ->withMeta([ "gridder" => [ "cols" => TwoColumns::$HALF, "type" => "stack" ] ]), Text::make(__('Last Name'), 'last_name') ->withMeta([ "gridder" => [ "cols" => TwoColumns::$HALF, "type" => "stack" ] ]), Text::make(__('Email Address'), 'email') ->withMeta([ "gridder" => [ "cols" => TwoColumns::$FULL, "type" => "stack" ] ]), ])->withMeta([ "gridder" => [ "cols" => TwoColumns::$GRID ] ]) ] } ``` What about the `stack`. You can choose if your field will be rendered as stack or in two columns (left label, right value). License ======= [](#license) Consider this as unlicensed piece of code. Right? Use it for the purpose that you want, there are no private or public usage limitation, including commercial. Also, there are no need to include this license in any distribution. Feel free to clone, fork, improve, store and/or distribute. ### Health Score 35 — LowBetter than 77% of packages Maintenance56 Moderate activity, may be stable Popularity14 Limited adoption so far Community9 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~73 days Total 5 Last Release 296d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/8731267?v=4)[Ian Torres](/maintainers/zen0x7)[@Zen0x7](https://github.com/Zen0x7) --- Top Contributors [![Zen0x7](https://avatars.githubusercontent.com/u/8731267?v=4)](https://github.com/Zen0x7 "Zen0x7 (6 commits)") --- Tags gridgrid-layoutslaravellaravel-novalaravel-nova-packagetailwindcsslaravelnova ### Embed Badge ![Health badge](/badges/zen0x7-gridder/health.svg) ``` [![Health](https://phpackages.com/badges/zen0x7-gridder/health.svg)](https://phpackages.com/packages/zen0x7-gridder) ``` ### Alternatives [renatomarinho/laravel-page-speed Laravel Page Speed 2.5k1.7M11](/packages/renatomarinho-laravel-page-speed)[emargareten/inertia-modal Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. 90157.6k](/packages/emargareten-inertia-modal)[forjedio/inertia-table Backend-driven dynamic tables for Laravel + Inertia.js 272.0k](/packages/forjedio-inertia-table)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.8k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)