Dynamic Grid Plugin

View Plugin

The DmfCmsDynamicGrid plugin provides a visual grid editor for flexible CSS grid layouts in Shopware Shopping Experiences. Create responsive layouts via drag & drop and use them as reusable CMS blocks.

On this page:

• Requirements
• Installation
• Features
• Usage
  • Creating a Grid Template
  • Using a Grid Block in CMS
• Grid Editor
  • Controls
  • Constraints
  • Breakpoints
• Responsive Layouts
  • Viewport Synchronization
  • The Depot System
• Gap Configuration
  • Separate Gaps
• Template Configuration
• CSS Utility Classes
  • Grid Container
  • Slot Positioning
  • Responsive Prefixes
• Admin Navigation
• Troubleshooting
  • Template doesn't appear as CMS block
  • Template changes not reflecting
  • Gaps not working
  • Slots not positioning correctly

---

Requirements

• Shopware 6.7.0 or higher
• PHP 8.3 or higher

Installation

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

---

Features

• Visual Grid Editor: Drag & drop and resize directly in admin
• Responsive Layouts: Separate configuration for desktop, tablet, and mobile
• Dynamic CMS Blocks: Saved templates automatically appear as CMS blocks
• Viewport Synchronization: Optional sync of changes across all viewports
• CSS Custom Properties: Flexible gap values without restrictions
• Depot System: Show/hide slots for different viewports

---

Usage

Creating a Grid Template

1. Navigate to Content → Grid Templates in Admin
2. Click Create Template
3. Enter a name (e.g., "Hero with Sidebar")
4. Configure the grid in the visual editor:
   • Set columns and rows (max. 12×6)
   • Add slots by clicking on empty cells
   • Move slots via drag & drop
   • Resize using the +/- buttons
5. Configure gaps
6. Save the template

Using a Grid Block in CMS

1. Open a CMS page for editing
2. Click Add Block
3. Select your template under the Dynamic Grid category
4. Fill slots with any CMS elements

---

Grid Editor

Controls

Action	Description
Click on empty cell	Add new slot
Drag & drop	Move slot
+/- buttons	Enlarge/shrink slot
× button	Remove slot (to depot)
Viewport tabs	Switch between Desktop/Tablet/Mobile
Sync toggle	Apply changes to all viewports

Constraints

Property	Maximum
Columns	12
Rows	6
Slots per template	12

Breakpoints

Viewport	Prefix	Breakpoint
Desktop	(none)	> 1024px
Tablet	md:	769px - 1024px
Mobile	sm:	≤ 768px

---

Responsive Layouts

Viewport Synchronization

With sync enabled, changes to columns, rows, slots, and gaps are automatically applied to all viewports.

Enable synchronization:

1. Click the Sync toggle in the editor
2. Confirm adoption of current values

Individual viewports: With sync disabled, you can define completely different layouts for each viewport:

• Desktop: 12 columns, complex layout
• Tablet: 6 columns, simplified
• Mobile: 2 columns, stacked

The Depot System

The depot is a virtual area for slots not visible in the current viewport.

When is a slot in the depot?

• Position outside the visible grid
• Slot was removed for the viewport (but not deleted)

Depot actions:

• Drag & drop: Drag slots from depot back into the grid
• Eye badge: Indicates when slot is visible in other viewports
• Delete permanently: Removes slot from all viewports

---

Gap Configuration

Separate Gaps

The editor allows separate values for column and row gaps:

Setting	Description
Column Gap	Horizontal spacing between columns
Row Gap	Vertical spacing between rows
Sync Gaps	Synchronize column and row gap

---

Template Configuration

Templates are stored as JSON:

{
  "slotsCount": 3,
  "viewports": {
    "desktop": {
      "columns": 3,
      "rows": 2,
      "columnGap": "24px",
      "rowGap": "24px",
      "syncGaps": true,
      "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)
syncGaps	Gaps synchronized
items[].x	Horizontal start position (0-based)
items[].y	Vertical start position (0-based)
items[].w	Width in columns
items[].h	Height in rows

---

CSS Utility Classes

The plugin generates CSS classes for grid positioning:

Grid Container

.dmf-grid           /* Enables CSS Grid */
.dmf-grid-cols-{n}  /* Sets n columns (1-12) */

Slot Positioning

.dmf-col-start-{n}  /* Start column (1-12) */
.dmf-col-span-{n}   /* Column width (1-12) */
.dmf-row-start-{n}  /* Start row (1-6) */
.dmf-row-span-{n}   /* Row height (1-6) */
.dmf-hidden         /* Hide element */

Responsive Prefixes

/* Desktop (> 1024px) */
.dmf-col-span-6

/* Tablet (769px - 1024px) */
.md\:dmf-col-span-4

/* Mobile (≤ 768px) */
.sm\:dmf-col-span-2

---

Admin Navigation

The module appears under Content in the admin menu:

Route	Path
List	/dmf/grid/template/list
Detail	/dmf/grid/template/detail/:id
Create	/dmf/grid/template/create

---

Troubleshooting

Template doesn't appear as CMS block

1. Check browser console for errors
2. Ensure template is saved
3. Clear cache: bin/console cache:clear

Template changes not reflecting

1. Clear cache
2. Reload page
3. Check if DmfGridBlockResolver is active

Gaps not working

1. Check CSS custom properties in browser DevTools
2. Ensure SCSS file is compiled
3. Run bin/console theme:compile

Slots not positioning correctly

1. Check slot ID mapping (slot-1 ↔ content1)
2. Verify viewport config in DevTools
3. Ensure no CSS conflicts exist