The Gridstack field Drupal module by InternetDevels developers

The Gridstack field Drupal module by InternetDevels developers

Last time we gave you tips on how to create a Bootstrap subtheme in Drupal 8 from our developer’s blog post, and today we have another one for you. There is a useful Drupal module created by the InternetDevels developers who are working at JYSK global shop chain project. And, to tell you more about it, one of the module’s creators wrote this blog post explaining the module’s aim and work.

In Drupal web development, we often received tasks from customers in which they wanted to manage their website layout. Up until recently, we had been telling them we could just break the grid and let them pick the content for it. And now we have found a partial solution to this issue with the GRIDSTACK.JS plug-in.

Gridstack.js is a JQuery plugin for widget placing. This is a drag-and-drop multi-column grid that lets you build adaptive mockups, in which you can customize the size and position of a certain grid.

We decided to use this plug-in and create a Drupal module which would help us build a layout for the nodes and display it all in the same field.

What does the Gridstack field module do?

It lets you create a field of Gridstack type, where you can add multiple nodes to the same page and arrange them according to your preferences.

It is very easy to do. First, install the Gridstack field module by downloading the module from

The Gridstack field Drupal module

Together with the module, install the Libraries API module, download the Backbone and Underscore libraries, and, of course, the Gridstack plugin.

The Gridstack field Drupal module

Place it all in the libraries folder and safely enable the module in the administrative interface.

The Gridstack field Drupal module

Then everything is a snap: in the content type, create a field of Gridstack type.

The Gridstack field Drupal module

And customize it by selecting the types of content we want to display in the grid. Customize the grid cell, where:

  • height: maximum rows amount. Default is 0, which means no maximum rows;
  • width: amount of columns (default: 12);
  • cell height: one cell height (default: 60). It can be: an integer (px), a string (for example: '10em', '100px', '10rem'), 0 or NULL, in which case the library will not generate styles for rows. Everything must be defined in CSS files. "Auto" — height will be calculated from cell width;
  • min width: minimum width. If the window width is smaller, the grid will be displayed in one column (default: 768);
  • RTL: if true, turn grid to RTL. Possible values are true, false, 'auto' (default: 'auto');
  • vertical margin: vertical gap size;
  • animate: enable animation (default: false);
  • always show resize handle: if true, the resize handler is displayed even if the user does not mouse over the widget (default: false);
  • auto: if false, gridstack will not initialize existing items (default: true);
  • disable drag: disallows widget dragging (default: false);
  • disable resize: disallows widget resizing (default: false);
  • float: enables floating widgets (default: false).

That's it. You can now easily use the field. Add nodes to the grid and place them as you wish.

The Gridstack field Drupal module

What we have created is not a perfect website building tool, but we tried to get as close to it as possible. The Gridstack field Drupal module aims to make website development a little easier, and give you the opportunity to make sure the web design is to your liking.

Build with love!

13 votes, Rating: 4.7

Read also


Here goes another Drupal 8 post by one of our Drupal developers! Having enjoyed in-depth overviews of building Drupal 8 modules, theming, configuration, creating pop-ups, using Twig, and working...


Sometimes duets may sound even more impressive than solo performers. So meet the Drupal and AngularJS duet! The “music” these two produce together is the harmony of backend and frontend in...


Being strong, secure, and flexible is exactly what the doctor ordered for any good site! That’s why Drupal is a healthy idea for health care websites as well. Today, we’ve picked some of these...


Today’s the day for our Drupal developer’s blog post again, which means a lot of attention to detail and practical tips — this time on caching in Drupal 7. We have posts about creating CTools...


According to the best practices of responsive web design, a website neatly adapts to whatever screen it is viewed on. According to the best traditions of our blog, we make collections of free...

Subscribe to our blog updates