PHPackages georgpreissl/contao-grix-bundle - 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. georgpreissl/contao-grix-bundle ActiveContao-bundle[Utility & Helpers](/categories/utility) georgpreissl/contao-grix-bundle =============================== Ein Grid-Sitebuilder für Contao auf Basis von Bootstrap. Mit dieser Erweiterung kannst du Inhalte in Spalten aufteilen. Inhaltselemente werden bereits im Backend in der Spalten-Ansicht angezeigt und können per Drag&Drop arrangiert werden. Die Eigenschaften einer Spalte können mit wenigen Klicks geändert werden. Zudem können Reihen und Spalten ineinander verschachtelt werden. Das entsprechende Bootstrap-Grid wird mitgeliefert und kann im Layout aktiviert werden. Besonders praktisch für Redakteure ist, dass zwischen den Responsive-Breakpoints direkt im Backend gewechselt werden kann. 3.0.4(1y ago)32041[6 issues](https://github.com/georgpreissl/contao-grix-sitebuilder/issues)LGPL-3.0+CSSPHP ^8.0 Since Jan 6Pushed 1y ago1 watchersCompare [ Source](https://github.com/georgpreissl/contao-grix-sitebuilder)[ Packagist](https://packagist.org/packages/georgpreissl/contao-grix-bundle)[ RSS](/packages/georgpreissl-contao-grix-bundle/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (1)Versions (13)Used By (0) Grix – ein Bootstrap-Sitebuilder für Contao =========================================== [](#grix--ein-bootstrap-sitebuilder-für-contao) Grix vereinfacht die Erstellung und Bearbeitung von grid-basierten Seiteninhalten in Contao. Vorteile -------- [](#vorteile) - Inhaltselemente werden auch im Backend in der Grid-Ansicht angezeigt - Inhaltselemente können per Drag&Drop in Spalten und Reihen arrangiert werden - Die Bootstrap-Eigenschaften einer Spalte können mit wenigen Klicks geändert werden - Schneller Vorschau-Wechsel zwischen den Breakpoints im Backend - Reihen und Spalten können einfach ineinander verschachtelt werden - Bereits erstellte Inhaltselemente können in eine Spalte importiert werden [![screen1](https://user-images.githubusercontent.com/4385048/103889062-1336f100-50e6-11eb-8844-925954f57a4e.png)](https://user-images.githubusercontent.com/4385048/103889062-1336f100-50e6-11eb-8844-925954f57a4e.png)*Grix im Bearbeitungsmodus* [![screen2](https://user-images.githubusercontent.com/4385048/103889097-23e76700-50e6-11eb-9dbd-29688838b3d2.png)](https://user-images.githubusercontent.com/4385048/103889097-23e76700-50e6-11eb-9dbd-29688838b3d2.png)*Grix im Vorschaumodus* Verwendung ---------- [](#verwendung) Um den Grix-Sitebuilder bei der Bearbeitung eines Artikels zu verwenden, muss in den Artikel-Einstellungen die Checkbox "Grix aktivieren" angeklickt werden. Wurde das gemacht, ist das Grix-Bearbeitungsicon in der Artikel-Listenansicht aktiv (es ist nicht mehr ausgegraut). Der Artikel kann nun mit Grix bearbeitet werden. Wird Grix in den in den Artikel-Einstellungen wieder deaktiviert, werden die Inhaltselemente des Artikels wie zuvor ausgegeben. Um die mit dem Bundle mitgelieferte Bootstrap-CSS-Datei zu verwenden, muss in den Layouteinstellungen die Checkbox "Grix CSS-Dateien laden" aktiviert werden. Den Grid bearbeiten ------------------- [](#den-grid-bearbeiten) ### Eigenschaften von Reihen, Spalten und Inhaltselementen ändern [](#eigenschaften-von-reihen-spalten-und-inhaltselementen-ändern) Um die Eigenschaften von Reihen, Spalten und Inhaltselementen zu ändern, muss das Element zuerst ausgewählt werden. Klicke dazu in den leeren Bereich des jeweiligen Elements. Ist das Element ausgewählt, erscheint es mit einer orangen Umrandung. Wird beim Auswählen die Taste "Shift" gedrückt, können auch mehrere Elemente gleichzeitig ausgewählt bzw. bearbeitet werden. Wurde die Auswahl gemacht, können im Header-Menü die Eigenschaften der Auswahl verändert werden. Durch einen Klick auf das Label des Buttons, kann eine definierte Eigenschaft auch wieder aufgehoben werden. Durch einen Klick auf "Kopieren" kann das ausgewählte Element (mit all seinen Inhalten) auch kopiert werden. Mit einem Klick auf den Button "Aufheben" wird die Auswahl wieder aufgehoben. ### Eigenschaften einer Reihe ändern [](#eigenschaften-einer-reihe-ändern) Wurde eine Reihe (oder mehrere) ausgewählt, kann der Abstand unterhalb (margin-bottom in rem) erhöht oder verringert werden. Die Eigenschaften "Breite", "Versatz", "Push" und "Pull" sind für Reihen nicht verfügbar – diese Buttons sind daher ausgegraut. ### Eigenschaften einer Spalte ändern [](#eigenschaften-einer-spalte-ändern) Wurde eine Spalte (oder mehrere) ausgewählt, können mit den Plus/Minus-Buttons die Eigenschaften "Breite", "Versatz", "Push" und "Pull" geändert werden. Zusätzlich kann die Spalte mit all ihren Inhaltselementen kopiert werden. Der Abstand unterhalb kann bei einer Spalte nicht verändert werden. ### Eigenschaften eines Inhaltselements ändern [](#eigenschaften-eines-inhaltselements-ändern) Wurde ein Inhaltselement (oder mehrere) ausgewählt, kann der Abstand unterhalb (margin-bottom in rem) erhöht oder verringert werden. Die Eigenschaften "Breite", "Versatz", "Push" und "Pull" sind für Inhaltselemente nicht verfügbar – diese Buttons sind daher ausgegraut. ### Den Reihen und Spalten CSS-Klassen zuweisen [](#den-reihen-und-spalten-css-klassen-zuweisen) Mit Grix wird ein Backendmodul namens "Grix CSS" mitinstalliert. Dieses Modul scheint im Backend in der vertikalen Seitenleiste (Gruppe "Layout") auf. Mit diesem Modul können CSS-Stile angelegt werden. Diese CSS-Stile können dann den Reihen und Spalten des Grids zugewiesen werden. Die Zuweisung erfolgt über das Zahnrad-Icon der Reihen und Spalten. Klickt man dieses Icon an, öffnet sich ein PopUp. Im oberen Bereich des PopUps können nun die zuvor angelegten CSS-Stile ausgewählt werden. Ist ein CSS-Stil aktiviert, erscheint er farblich hervorgehoben. ### Inhaltselemente per Drag&Drop arrangieren [](#inhaltselemente-per-dragdrop-arrangieren) Inhaltselemente können per Drag&Drop neu platziert werden. Dazu das Inhaltselement mit gedrückter Maustaste an den Zielort verschieben. Ein grüner Platzhalterrahmen zeigt an wenn das Inhaltselement eingefügt werden kann. ### Ausgabe-Breiten (Breakpoints) berücksichtigen [](#ausgabe-breiten-breakpoints-berücksichtigen) Die Änderungen an Reihen, Spalten und Inhaltselementen gelten für die unter "Ausgabegerät" aktivierte Ausgabe-Breite. Vier Ausgabe-Breiten (Breakpoints) stehen zur Verfügung: - Extra small devices (< 768px) - Small devices (≥ 768px) - Medium devices (≥ 992px) - Large devices (≥ 1200px) Werte werden dabei an höhere Ausgabe-Breiten "vererbt". D.h. eine Änderung für "Extra small devices" gilt auch für die höheren Ausgabe-Breiten. Es sei denn bei diesen Ausgabe-Breiten werden eigene Werte definiert. Die Bearbeitungs-Menüs ---------------------- [](#die-bearbeitungs-menüs) Reihen, Spalten und Inhaltselementen enthalten jeweils Bearbeitungs-Menüs. Diese erscheinen unterhalb des Elements und sind grau hinterlegt. Die Funktionen in diesen Menüs sind je nach Element verschieden. ### Das Reihen-Bearbeitungs-Menü [](#das-reihen-bearbeitungs-menü) Das Reihen-Bearbeitungs-Menü enthält folgende Funktionen (von links nach rechts): - Der Reihe eine weitere Spalte hinzufügen - Eine weitere Reihe unterhalb der jeweiligen Reihe einfügen - Vordefinierte Spaltenkonfiguration für die Ausgabe-Breiten in einer Übersicht definieren - Vordefinierte Spaltenkonfiguration anwenden - Die Reihe nach oben oder unten verschieben - Die Reihe entfernen ### Das Spalten-Bearbeitungs-Menü [](#das-spalten-bearbeitungs-menü) Das Spalten-Bearbeitungs-Menü enthält folgende Funktionen (von links nach rechts): - Innerhalb der Spalte eine Reihe einfügen (Reihen und Spalten können beliebig verschachtelt werden) - Ein neues Inhaltselement in die Spalte einfügen - Ein bereits in diesem Artikel erstelltes Inhaltselement in die Spalte importieren - Die Spalte entfernen ### Das Inhaltselement-Bearbeitungs-Menü [](#das-inhaltselement-bearbeitungs-menü) Das Inhaltselement-Bearbeitungs-Menü enthält folgende Funktionen (von links nach rechts): - Das Inhaltselement bearbeiten - Ein neues Inhaltselement unterhalb des jew. Inhaltselement einfügen - Das Inhaltselement entfernen (es wird nur aus dem Grid entfernt, nicht tatsächlich gelöscht) Vorschau aktivieren ------------------- [](#vorschau-aktivieren) Durch einen Klick auf den Button "Vorschau" werden die UI-Elemente des Grids ausgeblendet. Zusätzlich werden die Inhaltselmente ohne Maximal-Breite angezeigt. So bekommt man einen besseren Eindruck wie der Grid im Frontend aussehen wird. Ein Arrangieren mit Drag-and-Drop ist auch im Vorschau-Modus möglich. ### Health Score 31 — LowBetter than 68% of packages Maintenance24 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community8 Small or concentrated contributor base Maturity65 Established project with proven stability 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 ~137 days Recently: every ~1 days Total 12 Last Release 434d ago Major Versions 1.0.6 → 2.0.02023-11-29 2.0.0 → 3.0.02025-02-26 PHP version history (2 changes)1.0.6PHP ^7.2 || ^8.0 3.0.0PHP ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/ce4c5c128181b5b7722a78f8d1228fc5e0323a64056fe9bced5e8d01730f5e5a?d=identicon)[thesweetg](/maintainers/thesweetg) --- Top Contributors [![georgpreissl](https://avatars.githubusercontent.com/u/4385048?v=4)](https://github.com/georgpreissl "georgpreissl (27 commits)") --- Tags gridcontaobootstrapcolumnsspaltensitebuilder ### Embed Badge ![Health badge](/badges/georgpreissl-contao-grix-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/georgpreissl-contao-grix-bundle/health.svg)](https://phpackages.com/packages/georgpreissl-contao-grix-bundle) ``` ### Alternatives [codefog/contao-haste haste extension for Contao Open Source CMS 42650.8k139](/packages/codefog-contao-haste)[madeyourday/contao-rocksolid-custom-elements Create your own, nestable content elements using a modular system. End the WYSIWYG chaos with your own content elements. 50341.9k12](/packages/madeyourday-contao-rocksolid-custom-elements)[madeyourday/contao-rocksolid-columns Arrange your content elements in responsive columns 10116.5k2](/packages/madeyourday-contao-rocksolid-columns)[terminal42/contao-folderpage Provides a new page type for Contao that allows you to group pages into folders. 18147.9k9](/packages/terminal42-contao-folderpage) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)