PHPackages                             digitaledinge/contao-grid-ratio-widget - 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. digitaledinge/contao-grid-ratio-widget

ActiveContao-bundle[Utility & Helpers](/categories/utility)

digitaledinge/contao-grid-ratio-widget
======================================

Grid ratio widget for Contao Open Source CMS

0.1.1(1mo ago)017↓50%MITJavaScriptPHP ^8.2

Since Jun 23Pushed 1mo agoCompare

[ Source](https://github.com/Digitale-Dinge/contao-grid-ratio-widget)[ Packagist](https://packagist.org/packages/digitaledinge/contao-grid-ratio-widget)[ RSS](/packages/digitaledinge-contao-grid-ratio-widget/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependencies (7)Versions (3)Used By (0)

Contao Grid Ratio Widget
========================

[](#contao-grid-ratio-widget)

 [![github version](https://camo.githubusercontent.com/13c779ad05145ac957c448534ba0c21fb978b5ba29bd48337c4949652e81c81d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f4469676974616c652d44696e67652f636f6e74616f2d677269642d726174696f2d776964676574)](https://github.com/Digitale-Dinge/contao-grid-ratio-widget) [![amount of downloads](https://camo.githubusercontent.com/c2d0ed8c33e5bf643c5a12de7d27c53415cfcbb956883f11e314fb6c4cc2b1f4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6469676974616c6564696e67652f636f6e74616f2d677269642d726174696f2d7769646765743f636f6c6f723d663437633030)](https://packagist.org/packages/digitaledinge/contao-grid-ratio-widget) [![minimum php version](https://camo.githubusercontent.com/c5cb5a993651ff642d781285d60e2f165d4f4d0e0c2ac3d7276bf61013ce8c20/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646570656e64656e63792d762f6469676974616c6564696e67652f636f6e74616f2d677269642d726174696f2d7769646765742f7068703f636f6c6f723d343734413841)](https://packagist.org/packages/digitaledinge/contao-grid-ratio-widget)

Description
-----------

[](#description)

Adds a backend widget to define uneven grid column ratios for element groups. The editor sets a column count (2–4) and drags a ruler to split the width; the value is stored as a ready-to-use `fr` list (e.g. `4fr 8fr`) and rendered as the inline custom property `--grid-cols` on the group wrapper.

The widget is **framework-independent** (e.g. no Tailwind) and **self-contained**: Installing the bundle adds the field to the `element_group` content element and ships the matching frontend grid CSS.

How it works
------------

[](#how-it-works)

- **Backend:** an "Erweitertes Spaltenset" checkbox reveals the ratio field (sub-palette). The ruler snaps to twelfths, so 2/3/4 columns can be split evenly and in exact thirds/quarters. Percentages are shown; `fr` is stored.
- **Frontend:** the bundle wraps the nested elements in `` and ships `grid-ratio` CSS (`grid-template-columns: var(--grid-cols)`, stacked on mobile).

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

[](#installation)

```
composer require digitaledinge/contao-grid-ratio-widget
```

Customization
-------------

[](#customization)

The grid-ratio behavior is split into overridable Twig blocks, so you can switch parts off or reuse them elsewhere.

### Resets

[](#resets)

```
{# @Contao/content_element/element_group.html.twig #}

{% extends '@Contao/content_element/element_group.html.twig' %}

{# Reset the grid_ratio_attributes as they are embedded within _content_wrapper #}
{% block grid_ratio_wrapper_attributes %}{% endblock %}

{# Removing the styles within head #}
{% block grid_ratio_css %}{% endblock %}
```

### Using within your template

[](#using-within-your-template)

To apply a stored value to your own element, add the attributes that will inject the `--grid-cols` variable in your CSS:

```
{% extends '@Contao/content_element/_base.html.twig' %}
{% use '@Contao/grid/grid_ratio_attributes.html.twig' %}

{# Adding attributes #}
{% set own_attributes = attrs().mergeWith(block('grid_ratio_attributes')) %}

{# Adding styles #}
{% add 'grid-ratio' to head %}

        @media (width >= 768px) {
            .grid-ratio {
                display: grid;
                grid-template-columns: var(--grid-cols, 1fr);
            }
        }

{% endadd %}
```

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance90

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity37

Early-stage or recently created project

 Bus Factor1

Top contributor holds 54.5% 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 ~0 days

Total

2

Last Release

45d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/22a9adccb8f27d628c43ec6ecc701cbfe5813d02b0439722a952067f6868c521?d=identicon)[zoglo](/maintainers/zoglo)

---

Top Contributors

[![zoglo](https://avatars.githubusercontent.com/u/55794780?v=4)](https://github.com/zoglo "zoglo (6 commits)")[![cristiangavriliu](https://avatars.githubusercontent.com/u/170434989?v=4)](https://github.com/cristiangavriliu "cristiangavriliu (5 commits)")

---

Tags

gridcontaowidget

### Embed Badge

![Health badge](/badges/digitaledinge-contao-grid-ratio-widget/health.svg)

```
[![Health](https://phpackages.com/badges/digitaledinge-contao-grid-ratio-widget/health.svg)](https://phpackages.com/packages/digitaledinge-contao-grid-ratio-widget)
```

###  Alternatives

[easycorp/easyadmin-bundle

Admin generator for Symfony applications

4.3k18.3M414](/packages/easycorp-easyadmin-bundle)[symfony/framework-bundle

Provides a tight integration between Symfony components and the Symfony full-stack framework

3.6k257.3M12.2k](/packages/symfony-framework-bundle)[symfony/security-bundle

Provides a tight integration of the Security component into the Symfony full-stack framework

2.5k190.0M2.5k](/packages/symfony-security-bundle)[shopware/storefront

Storefront for Shopware

674.7M273](/packages/shopware-storefront)[shopware/core

Shopware platform is the core for all Shopware ecommerce products.

595.8M650](/packages/shopware-core)[metamodels/core

MetaModels core

10156.6k68](/packages/metamodels-core)

PHPackages © 2026

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