ckeditor_advanced_container

When editors need to arrange content in columns or side-by-side sections inside a rich text field, Drupal offers no built-in solution beyond tables — which are semantically incorrect for layout, fragile on mobile, and inaccessible to screen readers. Achieving responsive column layouts inside CKEditor 5 otherwise requires custom development, a framework-dependent module, or pre-defined templates that a developer must maintain.

This module solves that by adding a flexbox-based container and column layout system directly inside CKEditor 5. Editors insert a container, choose how many columns they need, and configure widths, gaps, backgrounds, borders, and responsive breakpoint behavior — all from within the editor, without touching any code or template files. The output is semantic div-based markup rendered with pure CSS flexbox, independent of any CSS framework or theme.

New to Drupal? Think of it this way: normally CKEditor gives you a single column of text. This module lets editors divide that area into side-by-side sections — a photo on the left and text on the right, for example — and control exactly how those sections stack on phones and tablets, all without leaving the editor or asking a developer.

Use it when editors need flexible, responsive column layouts inside body fields without Layout Builder, Bootstrap, or any developer involvement for each new layout variation.

Features

The core functionality of this module is straightforward: it extends CKEditor 5 with a widget that wraps content in a flexbox container divided into configurable columns. When an editor inserts a container, an inline toolbar appears with buttons to add or remove columns and open properties panels for the container and each individual column.

Key features include:

Insert flexbox-based containers with 1–12 configurable columns directly inside CKEditor 5, as an alternative to tables for layout.
Add or remove columns dynamically using the inline contextual toolbar, without losing existing content.
Configure per-container properties: width, gap between columns, horizontal alignment, background color, and full border control (style, color, width, radius).
Configure per-column properties: width, padding, background color, vertical alignment (top, center, bottom), and full border control.
Set independent responsive widths for mobile, tablet, and desktop breakpoints, with optional auto-stacking of columns on smaller screens.
Responsive preview toolbar buttons (Desktop / Tablet / Mobile) simulate breakpoints directly inside the editor so editors can see how layouts will look before publishing.
All CSS values are sanitized and validated before being written to the model, blocking XSS via javascript:, expression(), and other injection vectors.
The frontend library is loaded lazily — only on pages whose content actually contains an advanced-container element — avoiding unnecessary CSS and JS on unrelated pages.
Containers can be nested up to 3 levels deep for complex layout requirements.
Drupal Media float containment is handled automatically: images with alignment applied inside columns are neutralized so they stay within their column boundary.

When and why would someone use this module? Use cases include:

Landing pages: Multi-column hero sections, feature grids, and side-by-side text and image blocks — all built by editors without developer involvement.
Editorial content: Pull quotes beside article text, comparison layouts, or annotated image+caption pairs with responsive stacking on mobile.
Accessibility compliance: Semantic div-based flexbox layouts replace presentational tables, producing cleaner HTML for screen readers.
Works in: any content type, Paragraphs, Layout Builder blocks, and any entity with a CKEditor 5 text field.

Post-Installation

After enabling the module, no new configuration pages or content types are created — it integrates directly into the CKEditor 5 toolbar configuration interface:

Go to Administration → Configuration → Content authoring → Text formats and editors and edit the text format that uses CKEditor 5.
In the Toolbar section, drag the Advanced Container button into the active toolbar. Optionally, also add the Desktop, Tablet, and Mobile preview buttons for responsive simulation inside the editor.
Scroll down to the CKEditor 5 plugin settings section and open Advanced Container. Configure default values: number of columns (1–12), default gap (any CSS unit, e.g. 1rem), whether responsive settings are enabled by default, and auto-stack behavior on mobile and tablet.
Save your configuration and clear caches.
When editors create or edit content, clicking the container button inserts a flexbox container. A contextual toolbar appears with options to add/remove columns and open the Container Properties or Column Properties panels.
On the Manage display tab, no separate formatter configuration is required — the module attaches its frontend library automatically when rendered content contains a container.

Clear caches (drush cr or via the UI at Administration → Configuration → Performance) if the toolbar button or plugin settings don't appear immediately after enabling the module.

Additional Requirements

This module requires no external libraries or third-party APIs. The only requirements are:

Drupal core ^10 || ^11
Core CKEditor 5 module (must be enabled) — provides the editor framework this module extends.

Similar projects

CKEditor Bootstrap Grid — Creates rows and columns inside CKEditor using Bootstrap class syntax (col-md-6, etc.). It is a solid choice for sites already running a Bootstrap-based theme. This module takes a different approach: it generates self-contained flexbox markup using CSS custom properties, so it works with any theme without a framework dependency. It also provides a free-form properties panel where editors can set any CSS dimension, background, border, and responsive width per element directly.
CKEditor Layouts — Integrates Drupal's core Layout API into CKEditor 5, allowing editors to pick from layouts defined by site builders. It is a good fit when a controlled set of approved templates is preferred. This module is aimed at teams that want editors to freely create and adjust containers on the fly, without needing a developer to pre-define each layout variation.
Layout Builder (Drupal core) — The standard full-page layout system in Drupal, operating at the section and block level. It is the right tool for full-page composition. This module works at the field level, inside a CKEditor text area, so it complements Layout Builder rather than competing with it — editors get column layouts within individual text fields without any additional site builder configuration.
CKEditor 5 Plugin Pack — Layout Tables — A well-maintained collection of CKEditor 5 plugins that includes a Layout Tables feature for multi-column content. This module uses <div>-based flexbox instead of table elements, which may be preferable for teams prioritizing semantic markup and mobile-first responsive behavior without additional theme CSS.
HTML tables for layout (manual approach) — The traditional workaround used by editors who have no layout module installed: inserting a table and removing its borders. This approach produces inaccessible, non-responsive markup that breaks on mobile, is difficult to maintain, and is flagged as an error by accessibility auditors.

If none of the above fits your workflow, this module may be worth evaluating as a straightforward, framework-independent option that works with any Drupal theme and requires no pre-configuration from a developer.

Recommended projects

I also maintain and recommend the following modules. None of them rewrite or override Drupal's core output — they integrate cleanly with the existing system, extend its native capabilities, and work perfectly alongside this module:

CKEditor Media Image Style — Adds a style selector button to the CKEditor 5 media toolbar so editors can choose an image style (thumbnail, large, etc.) per embed, without creating new view modes. Place a media image inside a column and control both its display size and layout from within the editor.
CKEditor Media Title — Lets editors set a custom title attribute on media images embedded through CKEditor 5, directly from the media toolbar. Extends Drupal's native media embed without replacing the rendering pipeline.
Media Reference Override — Extends Drupal's standard media reference field to allow per-reference overrides of fields like alt text or title, storing the override on the referencing entity rather than the media entity itself. The original media remains untouched and reusable everywhere else.
Advanced Image Media Attributes Formatter — Extends Drupal's native image field formatters to expose additional HTML attributes (alt, title, class, etc.) as configurable options, without replacing or patching the core rendering system.
Logo Image Enhanced — Extends Drupal's built-in site logo handling with additional image field controls, giving sites more flexibility over how the logo is rendered and attributed without overriding theme templates.
Htaccess — Provides a UI for managing .htaccess rules directly from the Drupal admin interface. Useful for hardening production environments without manual file editing.

Commercial Support

This module is developed and maintained by Nelo.
The maintainer is available for professional consulting and architectural guidance related to CKEditor 5 integrations, media systems, production Drupal implementations, and enterprise content architecture.

drupal.org/u/nelo_drup

Supporting this Module

- Check out our sponsor, Dom Host Seo, who made this module possible with their support!

Community Documentation

Currently no external videos or demo sites are available. The module includes detailed help text accessible via Help > ckeditor_advanced_container.

For questions, bug reports, or feature requests, please use the issue queue on Drupal.org.