DmfCmsDynamicGrid

DmfCmsDynamicGrid adds a fully visual CSS-Grid editor to Shopware Shopping Experiences: slots can be dragged into place, resized freely, and configured per viewport (desktop/tablet/mobile). Saved templates automatically show up as CMS blocks.

Quick facts

Composer package	dmf/sw6-plugin-cms-dynamic-grid
Plugin class	Dmf\CmsDynamicGrid\DmfCmsDynamicGrid
Namespace	Dmf\CmsDynamicGrid
Version	1.1.0
Shopware	^6.7
PHP	8.3+

Installation

composer require dmf/sw6-plugin-cms-dynamic-grid
bin/console plugin:refresh
bin/console plugin:install --activate DmfCmsDynamicGrid
bin/console cache:clear

Features

• Visual grid editor: drag and drop slots, resize via buttons.
• Responsive layouts: separate configuration per viewport (desktop, tablet, mobile).
• Dynamic CMS blocks: saved templates show up automatically in the block picker.
• Viewport sync: optionally mirror changes across all viewports.

Usage

Create a grid template

1. Open Content → Grid Templates in the admin.
2. Click Create Template.
3. Enter a name and configure the grid:
   • Set columns and rows (max 6×6).
   • Add slots by clicking empty cells.
   • Move slots via drag and drop.
   • Resize slots using the +/- buttons.
4. Save.

Use a grid block in CMS

1. Edit a CMS page.
2. In the block selector pick your template under Dynamic Grid.
3. Fill the slots with any CMS elements.

Editor controls

Action	Description
Click on empty cell	Add new slot
Drag and drop	Move slot
+/-	Resize slot
×	Remove slot
Viewport tabs	Switch desktop/tablet/mobile
Sync toggle	Apply changes to all viewports

Constraints

• Maximum 6 columns
• Maximum 6 rows
• Maximum 12 slots per template
• Breakpoints: mobile ≤ 768 px, tablet ≤ 1024 px

Template configuration (JSON)

A template's configuration is persisted as JSON:

{
  "slotsCount": 3,
  "viewports": {
    "desktop": {
      "columns": 3,
      "rows": 2,
      "columnGap": "24px",
      "rowGap": "24px",
      "items": [
        { "id": "slot-1", "x": 0, "y": 0, "w": 1, "h": 1 },
        { "id": "slot-2", "x": 1, "y": 0, "w": 2, "h": 1 },
        { "id": "slot-3", "x": 0, "y": 1, "w": 3, "h": 1 }
      ]
    },
    "tablet": { },
    "mobile": { }
  }
}

Field	Description
columns	Number of columns
rows	Number of rows
columnGap	Horizontal gap (CSS value)
rowGap	Vertical gap (CSS value)
items[].x	Horizontal start position (0-based)
items[].y	Vertical start position (0-based)
items[].w	Width in columns
items[].h	Height in rows

Configuration

DmfCmsDynamicGrid ships no central plugin configuration, all settings live per template.

Notes

Custom Grids as a complement

For static, instantly available layouts, see DmfCmsCustomGrids.

Slot limit

More than 12 slots per template cannot be saved, this is a hard editor limit.