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.

User guide for editors

A step-by-step guide for shop operators (without developer internals) lives in the user guide: Dynamic Grid – User Guide.

Quick facts

Composer package	dmf/sw6-plugin-cms-dynamic-grid
Plugin class	Dmf\CmsDynamicGrid\DmfCmsDynamicGrid
Namespace	Dmf\CmsDynamicGrid
Version	1.2.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.
• Ready-made presets: 23 curated layouts (equal/unequal columns, multi-row) with no setup.
• Viewport sync: optionally mirror changes across all viewports.

Usage

Create a grid template

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

Use a grid block in CMS

1. Edit a CMS page.
2. In the block picker open the second selector Custom block category and pick a group (ready-made presets or Custom blocks).
3. Drag the layout you want onto the canvas.
4. 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 12 columns
• Maximum 6 rows
• Maximum 12 slots per template
• Breakpoints: mobile ≤ 768 px, tablet 769–1024 px, desktop > 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.