Dynamic Layouts
A visual layout builder module that allows creating and managing reusable layouts for use with Display Suite, Panels, and Drupal core's Layout Builder.
dynamic_layouts
Install
composer require 'drupal/dynamic_layouts:^2.1'
composer require 'drupal/dynamic_layouts:^2.0'
Overview
Dynamic Layouts provides a user-friendly interface for creating custom layouts without writing code. Site builders can visually design layouts by adding rows and columns, customizing CSS classes, and configuring column widths through an intuitive AJAX-powered admin interface.
The module supports both Bootstrap v4 grid system and custom grid configurations (6, 8, or 12 columns). Each created layout automatically becomes available as a Layout Plugin that can be used with Drupal core's Layout Builder, Display Suite, Panels, or any other module that consumes layout plugins.
Key capabilities include automatic column width calculation when adding/removing columns, custom CSS classes for rows and columns, configurable region names, and visual icon maps for layout preview in the Layout Builder interface.
Features
- Visual layout builder with AJAX-powered row and column management for creating reusable layouts without coding
- Support for Bootstrap v4 grid system (12 columns) and custom grid systems (6, 8, or 12 columns) with configurable CSS class prefixes
- Automatic column width calculation when adding or removing columns, distributing space evenly across non-customized columns
- Custom CSS classes for both rows and columns, allowing fine-grained styling control per layout element
- Customizable region/column names that become the region labels in Layout Builder
- Default row and column classes that apply to all elements in a layout for consistent styling
- Integration as Layout Plugin provider - each layout becomes automatically available in Layout Builder, Display Suite, and Panels
- Visual icon map generation for layout preview in the Layout Builder selection interface
- Export/import support through Drupal's configuration management system as config entities
Use Cases
Creating a responsive two-column layout for content pages
Navigate to Structure > Dynamic Layouts > Add new layout. Enter 'Two Column Content' as name, 'Content Layouts' as category, 'row' as default row class. Save and add one column to the existing row. Edit each column to set widths (e.g., col-8 for main content, col-4 for sidebar). The layout automatically appears in Layout Builder where you can apply it to content types and place blocks in each region.
Building a three-column footer layout
Create a new layout with one row. Add two more columns to get three columns total. The module automatically calculates widths (col-4 each for 12-column grid). Edit each column to give meaningful names like 'Footer Left', 'Footer Center', 'Footer Right'. These names become the region labels. Apply custom classes to the row for footer-specific styling.
Creating a complex landing page layout
Create a layout starting with 4 rows. Configure each row differently: full-width hero (1 column at col-12), three-column features section, two-column content area, and four-column footer. Use custom row classes to add spacing between sections. Each column can have custom classes for animations or background colors.
Using custom 8-column grid for unique design
In Settings, select Custom frontend library, enter your column prefix (e.g., 'span'), and choose 8 columns grid. The module generates a CSS grid system with your prefix. Create layouts using span-1 through span-8 classes. The frontend CSS library provides responsive flexbox rules for your custom grid.
Exporting layouts for deployment
After creating layouts in development, export configuration using Drupal's Configuration Management (drush cex). Layout config entities are exported as YAML files. Import on production with drush cim. All layouts become immediately available after cache clear.
Tips
- Always configure settings before creating layouts - select Bootstrap v4 if your theme uses Bootstrap, or use Custom for other CSS frameworks
- Use meaningful column names as they become the region labels displayed in Layout Builder
- The default row class 'row' works well with Bootstrap; for custom grids, use your framework's row class
- When adding columns, the module automatically divides available space among non-customized columns
- Custom column width overrides are preserved when other columns are added/removed - useful for fixed-width sidebars
- Categories help organize layouts - use consistent naming like 'Content Pages', 'Landing Pages', 'Components'
- Layouts are config entities - use Drupal's config export/import for version control and deployment
- The visual icon map in Layout Builder is automatically generated from your row/column structure
- Add custom classes to columns for component-specific styling without affecting other layouts
- When using Bootstrap, the module generates col-1 through col-12 classes matching Bootstrap's grid system
Technical Details
Admin Pages 4
/admin/config/dynamic-layouts
Lists all created dynamic layouts with their names and categories. Provides operations to edit or delete existing layouts. Displays a warning message if settings have not been configured, prompting users to configure the frontend library before creating layouts.
/admin/config/dynamic-layouts/settings
Configure global settings for Dynamic Layouts including the frontend CSS framework and grid configuration. Changes to settings will purge all existing column width configurations across all layouts.
/admin/config/dynamic-layouts/add
Create a new dynamic layout by defining its name, category, default CSS classes, and initial row count. After saving, you can visually configure rows and columns.
/admin/config/dynamic-layouts/manage/{dynamic_layout}
Edit an existing dynamic layout. Provides visual row and column management with AJAX operations for adding, editing, and removing rows and columns without page reloads.
Permissions 1
Hooks 4
hook_theme
Registers the 'dynamic_layouts_backend' theme hook for rendering the layout editor in admin interface.
hook_help
Provides help text for the module's help page by displaying the README content.
hook_install
Displays a welcome message with a link to the settings page after module installation.
hook_requirements
Checks runtime requirements. Displays a warning if Bootstrap frontend library is selected but bootstrap_library module is not installed.
Troubleshooting 6
You must configure the module settings first. Navigate to Structure > Dynamic Layouts > Settings and select a frontend library (Bootstrap or Custom). The add layout functionality is disabled until settings are configured.
Either install the bootstrap_library module and select Bootstrap v4, or ensure your theme includes Bootstrap v4 CSS. The module only provides the Bootstrap class structure, not the Bootstrap CSS itself.
When you customize a column's width, it becomes 'locked' and won't auto-adjust when adding/removing other columns. Only columns without custom widths participate in automatic width calculation. Check which columns have custom widths set.
This is expected behavior. Changing the frontend library or grid column count purges all existing column width configurations because the available width classes change. You need to reconfigure column widths in all existing layouts.
Clear all caches (drush cr or Admin > Configuration > Performance > Clear all caches). The module clears plugin cache on save, but sometimes a full cache clear is needed.
Ensure you've configured both the column prefix and grid column count in settings. The frontend library CSS is only attached when 'Custom' is selected. Check that your theme is not overriding the dynamic-layouts-frontend CSS.
Security Notes 3
- The 'Administer Dynamic Layouts' permission should only be granted to trusted administrators as layouts can include custom CSS classes
- Custom CSS classes entered in row/column configurations are escaped when rendered but could potentially conflict with existing styles
- Layout configurations are stored as config entities and follow Drupal's standard configuration security model