CSS Grid for Layout Builder

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

• Issue queue: https://www.drupal.org/project/issues/css_grid_layout
• Maintainer profile: https://www.drupal.org/u/arialblack