CSS Grid for Layout Builder
This module allows editors to create multi-column and multi-row CSS grids within individual Layout Builder regions. It provides a point-and-click interface to arrange blocks within a region, offering fine-grained control without creating nested layouts or modifying theme code. The module automatically generates responsive CSS for a clean and flexible layout experience.
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:
- Reporting bugs and suggesting improvements in the issue queue
- 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