This project is not covered by Drupal’s security advisory policy.

GridStack Paz
GridStack Tagore
GridStack dynamic layout builder

GridStack provides integration with gridstack.js as a dynamic layout builder for both magazine layout, and static float grid layout like Bootstrap, or Foundation, with drag-and-drop. GridStack magazine layouts are exposed to field formatters and Views style plugin. Its static layouts to core Field layout, DS, Panelizer, Widget, etc.

See, or

GridStack as a dynamic layout builder (WIP) for Bootstrap/ Foundation is available for testing at DEV, or the next Beta5+.
Warning! No return. Unless all custom Beta4 optionsets are stored at .yml file which later can be reverted using config_update.module back to Beta4 states.


  • Drag and drop layout builder, less prone to mistakes than Twig within database.
  • Supports magazine layouts, identified by fixed heights.
  • Supports static float layouts for Bootstrap or Foundation, identified by auto heights.
  • Responsive grid displays, layout composition, image styles, or multiple unique image styles per grid/box
  • Lazyloaded inline images, or CSS background images with multi-styled images.
  • Field formatters for Image, and fieldable entities like File Entity Reference.
  • Easy captioning.
  • A few simple box layouts.

Optional Features

GridStack doesn't require any below, yet exposes and enhances its layout features if any below is installed, thanks to modular plugin system.

  • Supports core Field Layout, DS, Panelizer, Widget modules.
  • Field formatters for fieldable entities like Media Entity and Paragraphs integration. Specific to fieldable entities, best when containing core image using Blazy formatters with CSS background option enabled.
  • Views style plugin.
  • Colorbox, Photobox, and Blazy Photoswipe for field formatters, or when using Blazy Views fields, or Blazy-related formatters from within Views.


Install the module as usual, more info can be found on:


Usage / Configuration

Visit admin/structure/gridstack to build a GridStack.

  • As Views style plugin:
    Visit admin/structure/views, and create a new page, or block with GridStack style.
  • As field formatters:
    Visit "Manage display" page, e.g.: /admin/structure/types/manage/page/display/default, and find GridStack formatters under Format. With complex fields like Media Entity or Paragraphs, you can combine GridStack formatters with Slick formatters to build unique grid layout for the slider.
  • As Bootstrap/ Foundation layouts:
    This requires any of optional core Field Layout, DS, Panels, Panelizer, Widget modules to function. Not all, one of them will do. Please refer to their documentation for better words.
    GridStack works with them, but doesn't require any.
    Running /update.php is required if already using Beta4.
    Read more about this section documentation.

Use the provided sample to begin with, be sure to read its README.txt.

GridStack 8.x-1.0-beta4 below requires v0.2.5.
GridStack 8.x-1.0-beta5+ and Dev versions require a minimum v0.3.0 available at "master" release.

Similar modules

Both try to solve one problem: empty gaps within a compact grid layout. Mason uses auto Fillers, or manual Promoted, options to fill in empty gaps. GridStack uses manual drag and drop layout builder to fill in empty gaps.

Check out README.txt for a few troubleshooting, and install the provided sample to get up, and running quickly.

Project information