Custom Grids Plugin

View Plugin

The DmfCmsCustomGrids plugin adds 23 predefined grid layouts for Shopping Experiences to your Shopware 6 installation. These enable more flexible design of shop pages with various column arrangements.

On this page:

• Requirements
• Installation
• Features
• Available Grid Layouts
  • Equal Columns
  • Asymmetric 2-Column Layouts
  • 3-Column Layouts
• Usage
  • Add Grid Block
  • Visual Representation
• Responsive Behavior
• Technical Details
  • Block Category
  • File Structure
  • PWA Support

---

Requirements

• Shopware 6.7.0 or higher
• PHP 8.2 or higher

Installation

composer require dmf/plugin-cms-custom-grids
bin/console plugin:install --activate DmfCmsCustomGrids
bin/console cache:clear

---

Features

• 23 Grid Layouts: Predefined column arrangements for every use case
• Bootstrap 12-Column System: Based on the well-known 12-column grid
• Responsive: All layouts are optimized for mobile devices
• Seamless Integration: Appear directly in the CMS block selection dialog
• PWA Compatible: Vue components for Shopware PWA available

---

Available Grid Layouts

Equal Columns

Layout	Columns	Description
1-column	1 × 12	Full width
2-column	2 × 6	Two equal halves
3-column	3 × 4	Three equal thirds
4-column	4 × 3	Four equal quarters
5-column	5 × ~2.4	Five equal columns
6-column	6 × 2	Six equal columns
8-column	8 × 1.5	Eight equal columns

Asymmetric 2-Column Layouts

Layout	Split	Description
2-1-2-column	2 + 1 + 2	Narrow - Extra narrow - Narrow
2-2-column	2 + 2	Two narrow columns
2-3-column	2 + 3	Narrow + Medium
2-4-column	2 + 4	Narrow + Wide
2-5-column	2 + 5	Narrow + Wide
2-6-column	2 + 6	Narrow + Half
2-8-2-column	2 + 8 + 2	Sidebar - Content - Sidebar
3-9-column	3 + 9	Quarter + Three-quarters
4-8-column	4 + 8	Third + Two-thirds
5-7-column	5 + 7	Asymmetric
7-5-column	7 + 5	Asymmetric (reversed)
8-4-column	8 + 4	Two-thirds + Third
9-3-column	9 + 3	Three-quarters + Quarter

3-Column Layouts

Layout	Split	Description
3-3-6-column	3 + 3 + 6	Small + Small + Large
3-6-3-column	3 + 6 + 3	Sidebar - Content - Sidebar
6-3-3-column	6 + 3 + 3	Large + Small + Small

---

Usage

Add Grid Block

1. Open a Shopping Experience in Admin
2. Click Add Block
3. Select the Custom Grids category
4. Choose the desired layout
5. Add elements to the columns

Visual Representation

The grids are based on the Bootstrap 12-column system:

12-Column Grid:
|  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  | 10  | 11  | 12  |

2-column (6+6):
|           6           |           6           |

3-9-column:
|   3   |               9                       |

2-8-2-column:
| 2 |           8           | 2 |

---

Responsive Behavior

All layouts automatically adapt to smaller screens:

• Desktop (≥992px): Full grid display
• Tablet (768px - 991px): Columns are stacked or reduced
• Mobile (<768px): All columns are displayed one below the other

---

Technical Details

Block Category

All Custom Grids appear in the custom-blocks category in the CMS block selection dialog.

File Structure

src/Resources/app/
├── administration/src/module/sw-cms/blocks/custom-blocks/
│   ├── custom-grid-1-column/
│   │   ├── component/          # Admin preview
│   │   ├── preview/            # Block selection preview
│   │   └── index.js            # Block registration
│   └── ...
├── storefront/src/scss/
│   └── base.scss               # Frontend styles
└── pwa/components/             # PWA Vue components

PWA Support

Vue components for all 23 layouts are available for Shopware PWA at:

src/Resources/app/pwa/components/swComponents/blocks/