Is a fully configurable 12-column grid system feasible in AEM Edge Delivery Services with Universal Editor?

[Oscar_LuisSa]

Hi everyone,

We are implementing a site using AEM Edge Delivery Services with AEM as the content source and the Universal Editor for authoring. Our functional team proposed a requirement for a modular 12-column grid system, where each row can have a dynamic layout configuration such as 3/9, 4/8, 6/6, 2/10, 1/11, 4/4/4, etc. Authors should also be able to insert any component into a specific column, reorder rows, duplicate them, and optionally change the column order for mobile.

Before moving forward, we want to validate whether this requirement is officially supported or recommended in EDS + Universal Editor.

Specifically, we want to confirm:

1. Can Universal Editor support dynamic structural layouts where authors choose the column distribution for each row?
2. Are editable containers/slots inside a configurable grid allowed by the Component Definition API?
3. Is there any official guidance or pattern for implementing a Page Builder-like grid (beyond predefined block variants)?
4. Are there technical limitations or best-practice restrictions that would prevent implementing a fully dynamic grid system?

Our goal is to avoid building something that goes beyond what EDS or UE were designed to support.

Any official references, best practices, or examples from Adobe would be greatly appreciated.

Thank you!

[HrishikeshKagne · Accepted solution]

Hi @Oscar_LuisSa ,

Try This: https://www.aem.live/developer/component-model-definitions

No, a fully configurable 12-column grid system is NOT directly supported or recommended in EDS with Universal Editor.

Key Limitations:

Single-level nesting only - EDS content model deliberately allows only a single level of nesting (blocks within sections) Adobe Experience Manager

No visual layout containers - Layout Mode and custom column controls are gone from Universal Editor. Authors build pages using Section Blocks and Content Blocks styled via CSS from EDS Perficient Blogs

Limited column block - There IS a "Columns" block, but it offers no content modeling, can only have rows/columns/classes properties, and only accepts default content (text, title, image, link/button) in cells Adobe Experience Manager

Container limitations - Multi-fields and composite multi-fields support is still being developed Adobe Experience League

Recommended Approach:

Use predefined block variants with CSS-based layouts

Define specific blocks for common layouts (2-column, 3-column, etc.) as separate block types

Handle responsive behavior in CSS/JavaScript, not through visual authoring

Complex visual components that need nesting must be modeled as sections combined using auto-blocking client-side Adobe Experience Manager

Your page-builder-style requirement conflicts with EDS's semantic, performance-first architecture. Suggest simplified approach with fixed layout blocks instead.

[muskaanchandwani]

Hello @Oscar_LuisSa 

Here is what is documented for using AEM authoring with Universal Editor and EDS for grid-style layouts :

1. Overall requirement (dynamic 12-column page builder): A fully dynamic 12-column grid where authors can freely choose per-row splits (3/9, 4/8, 6/6, 4/4/4, etc.) is not documented as a supported pattern. Layouts are modeled via block content models, sections, and specific block types (including container-style and column-style blocks) defined in code rather than through a generic page-builder grid UI for authors. [0] [2] [3]

2. Dynamic structural layouts per row: Universal Editor relies on block models and their fields; "The component-models.json file defines the model of blocks. The fields defined in the component model are persisted as properties in AEM and rendered as cells in the table that makes up a block." This means structural options come from predefined models and classes, not from an arbitrary per-row column chooser in the UI. [0]

3. Containers/slots inside a grid: Container-style blocks with editable children are explicitly supported in the content modeling guidance (container blocks and related filters). Which blocks can be added is controlled by definitions and filters: "It is also necessary to define which blocks exist and can be added to a page using the Universal Editor. The component-definitions.json file lists the components as they are made available by the Universal Editor." This allows editable containers, but not an arbitrary per-cell slot system in a generic 12-column grid. [0] [3]

4. Official pattern for Page Builder-like grids: The documented patterns for AEM authoring with Edge Delivery Services are blocks and sections, plus specialized patterns like container blocks and a columns-style block, combined with CSS for layout. There is no separate Page Builder-style grid system beyond such predefined block variants and styles. David’s Model explicitly recommends: "Rule #10: Limit number of Columns A large number of columns is not a good ideal for authoring as there are practical horizontal screen / document size limitations." [1]

5. Limitations / best-practice restrictions: David’s Model also cautions against complex table-style layouts: "If you find yourself in a place where you have a non-trivial rows and columns setup with spans / merged cells, it is probably a good idea to consider a different structure." Together with "Rule #10: Limit number of Columns," this guidance argues against implementing a fully dynamic 12-column grid and instead favors simpler, semantically modeled layouts using blocks, sections, and limited column patterns. [1]

References :

[0] https://www.aem.live/developer/component-model-definitions
[1] https://www.aem.live/docs/davidsmodel
[2] https://www.aem.live/docs/aem-authoring
[3] https://www.aem.live/developer/universal-editor-blocks