Drupal is a registered trademark of Dries Buytaert
drupal 11.3.8 — Update released for Drupal core (11.3.8)! drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! linkit 7.0.14 — Minor update available for module linkit (7.0.14). masquerade 8.x-2.2 — Minor update available for module masquerade (8.x-2.2). video_embed_field 3.1.0 — Minor update available for module video_embed_field (3.1.0). bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). symfony_mailer 2.0.0 — Major update available for module symfony_mailer (2.0.0). editoria11y 3.0.1 — Minor update available for module editoria11y (3.0.1). geofield_map 11.1.9 — Minor update available for module geofield_map (11.1.9). domain 3.0.0 — Major update available for module domain (3.0.0). ai 1.2.15 — Minor update available for module ai (1.2.15). ai 1.3.4 — Minor update available for module ai (1.3.4).
← All modules

css_grid_layout

7 sites No security coverage
View on drupal.org

CSS Grid for Layout Builder brings multi-column grid control to individual Layout Builder regions — without nested layouts. If you have a section with columns, this module lets editors define a CSS Grid inside each region: one row of 3 cards, a second row split in half, a full-width banner below — all without touching theme code or creating nested layout sections. It works entirely through a point-and-click modal in the Layout Builder UI and generates clean, responsive CSS automatically.

Features

  • Fake nested layouts with CSS Grid — Layout Builder sections have regions (columns), but nesting layouts inside regions is complex. This module solves that by letting you define a multi-row CSS Grid within each region, giving editors fine-grained control over how blocks are arranged inside a column without adding another layout layer.
  • Row-based grid editor — define up to 6 rows per region, each with 1–6 equal columns. Example: a full-width hero block, then a row of 3 cards, then 2 side-by-side blocks — all inside a single region.
  • Live preview — the modal shows exactly how blocks will be arranged before you apply.
  • WYSIWYG in edit mode — the grid is applied immediately inside the Layout Builder editor, so what you see in edit mode matches the frontend.
  • Responsive by default — the grid activates at 1024px and wider; on smaller screens blocks stack vertically automatically.
  • No configuration needed — install and the "Define grid" button appears on every Layout Builder region instantly.
  • Bootstrap Layout Builder compatible — works alongside BLB without conflict.
  • CSRF-protected AJAX save — grid settings are saved without a page reload.

Supporting this Module

This module is maintained voluntarily. If it saves you time, you can support development by:

  1. Reporting bugs and suggesting improvements in the issue queue
  2. Sponsoring the maintainer on drupal.org/u/arialblack

Community Documentation

Activity

Total releases
1
First release
Mar 2026
Latest release
1 month ago
Release cadence
—
Stability
0% stable

Releases

Version Type Release date
1.0.0-alpha1 Pre-release Mar 19, 2026