Hightlight Features

  • Drag and drop layout builder, less prone to fatal errors than Twig within database.
  • Supports magazine layouts which are normally identified by fixed heights.
  • Supports static float layouts for Bootstrap or Foundation which are normally identified by auto heights.
  • Supports responsive grid displays down to mobile.
  • Practically unlimited layout compositions and variants with just two template files with responsive image styles, or multiple unique image styles per grid/ box.
  • Supports lazy loading for inline images, or CSS background images, including with multi-styled/ multi-breakpoint images.
  • Field formatters for core Image, and fieldable entities like File Entity Reference, or Media entity.
  • Easy captioning based on image Title or Alt attributes, and extensible when using Views style plugin.
  • A few basci box layouts as starters.

Optional Features

GridStack doesn't require any module below. It does expose and enhance its layout features if they are installed, thanks to modular plugin system.

  • Works great with core Field Layout module, contrib DS, Panelizer, and Widget modules.
  • Field formatters for fieldable entities like Media Entity and Paragraphs integration. Best when containing core image using Blazy formatters along with CSS background option enabled to have each image which fits the box.
  • Views style plugin, which is the original integration before GridStack has field formatters.
  • Supports Colorbox, Photobox, and Blazy Photoswipe, or when using Blazy Views fields, or Blazy-related formatters inside Views.

Usage / Configuration

Go to admin/structure/gridstack to build a GridStack configuration entity.

  • As Views style plugin:
    Go to /admin/structure/views, and add  a new page, or block with GridStack style.
  • As field formatters:
    Go to "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. Only one is needed, not all. Please refer to their documentation for more info.
    GridStack plays nice with them, but doesn't require any.
    Running /update.php is required if already using Beta4.
    Read more about this section documentation.