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

Release blocker:
* #2369671: Integrate with breakpoints module
* #2369673: Support Susy 2.0 grid system

Flexible and configurable implementation of the SASS grid framework into Drupal. It supports Display Suite, Views and Panels.

This module aims to be a useful and configurable assistant for the creation of responsive and adaptive Drupal websites.

Basically, Fancy Grid configures Singularitygs based on the settings on its configuration page. It also generates CSS classes to align Display Suite Regions and Fields, Views and Panel panes to the grid. Its the choice of the editor or sitebuilder, what to place where in the grid.

Current features:

  • Set up your Singularitygs grid system within drupal with unlimited different breakpoints
  • Let our web service generate the CSS for you or do it by ourself in your own SASS environment.
  • Full Display Suite region support
  • New layouts with up to 10 regions. Simple markup and may replace all the "DS One Column" you use.
  • Views style plugin
  • Panels style plugin for panels and panes
  • Grid debugging: Display the grid on your website to check if everything is aligned correctly.
  • IPE implementation (Deprecated)
  • Supports grid contexts. Create a region containing panes containing views containing view rows. All of them can be exactly aligned to the grid.


Enable the module and configure your layouts. (This can be done here: /admin/config/content/fancy_grid)

You can use our web service to compile the css from our SassMeister instance or implement the Fancy Grid scss files into the SASS environment of your theme. The approach is flexible enough that you can use, alter and change every settings as you are used to do with Singularitygs.

Detailed information about this can be found on top of the configuration page.

Display Suite:

You can enable Flexi Grid for every entity view mode you have. You can find all configurations below the field list in the entity display settings page. (E.g. /admin/structure/types/manage/page/display)


Fancy Grid provides a Views style plugin to align the view results to the grid. The configuration form is the same as the one for Panel pane styles. The only exception is, that you can not select a starting column, because this value will be auto calculated by Fancy Grid.


The Panels implementation currently might be buggy and incomplete. I welcome issues and patches for this.

You will find two new display renderers in your Panels configuration. One is based on the standard renderer, the other one on the Panels IPE. You need to use these renderers to enable the grid alignment. (Without these, the panes won't be rendered with the Fancy Grid magic)

To align a pane to the grid, you have to select "Fancy Grid" as style. In the style settings, you can configure the layout behavior of the pane. Basically you just set the starting column and the width of the element. You can also force linebreaks/clears, remove the gutters and set some more useful settings.

Get more details in our developer documentation.

Project information