PHPackages                             wedevelopnl/statamic-grid - 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. wedevelopnl/statamic-grid

ActiveLibrary[Utility & Helpers](/categories/utility)

wedevelopnl/statamic-grid
=========================

Grid system with sections, rows, and elements for Statamic

017PHP

Since Dec 12Pushed 5mo agoCompare

[ Source](https://github.com/wedevelopnl/statamic-grid)[ Packagist](https://packagist.org/packages/wedevelopnl/statamic-grid)[ RSS](/packages/wedevelopnl-statamic-grid/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Statamic Grid
=============

[](#statamic-grid)

A flexible grid system addon for Statamic with sections, rows, and elements.

Installation
------------

[](#installation)

Add the repository to your project's `composer.json`:

```
{
    "repositories": [
        {
            "type": "path",
            "url": "addons/wedevelopnl/statamic-grid"
        }
    ]
}
```

Then require the package:

```
composer require wedevelopnl/statamic-grid
```

Publish the fieldsets:

```
php artisan vendor:publish --tag=statamic-grid
```

Usage
-----

[](#usage)

### Option 1: Automatic Rendering

[](#option-1-automatic-rendering)

Use the `grid:render` tag to automatically render your grid:

```
{{ grid:render }}
```

With a custom field name:

```
{{ grid:render :data="my_custom_grid" }}
```

### Option 2: Manual Rendering

[](#option-2-manual-rendering)

For full control, loop through the grid manually using the addon's partials:

```
{{ grid }}
    {{ partial src="wedevelopnl/statamic-grid::grid/section" }}
{{ /grid }}
```

Available partials:

- `statamic-grid::grid/section` - Renders a section with background color
- `statamic-grid::grid/row` - Renders a row with elements
- `statamic-grid::elements/text` - Renders a text element (Bard content)
- `statamic-grid::elements/image` - Renders an image element

### Adding the Grid to Your Blueprint

[](#adding-the-grid-to-your-blueprint)

Import the grid fieldset in your page blueprint:

```
tabs:
  main:
    fields:
      - import: grid
```

Structure
---------

[](#structure)

The grid system follows this hierarchy:

- **Grid** - Container for sections
    - **Section** - Full-width section with background color (light/dark)
        - **Row** - Horizontal row spanning the section
            - **Elements** - Content blocks (text, image, etc.)

Extending
---------

[](#extending)

To add custom element types:

1. Create a fieldset in `resources/fieldsets/element_yourtype.yaml`
2. Import it in `resources/fieldsets/element.yaml`
3. Create a view at `resources/views/vendor/statamic-grid/elements/yourtype.antlers.html`

License
-------

[](#license)

MIT

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance49

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a41b16aafbe795cfad0b4941b9ac37305e5bba2aefbcf56cc1f0c180928de27?d=identicon)[WeDevelop](/maintainers/WeDevelop)

---

Top Contributors

[![Dennisprins93](https://avatars.githubusercontent.com/u/9679179?v=4)](https://github.com/Dennisprins93 "Dennisprins93 (8 commits)")

### Embed Badge

![Health badge](/badges/wedevelopnl-statamic-grid/health.svg)

```
[![Health](https://phpackages.com/badges/wedevelopnl-statamic-grid/health.svg)](https://phpackages.com/packages/wedevelopnl-statamic-grid)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)