#D8CX: This module will not be ported for Drupal 8. Views grids in core have been replaced with DIVs: #1903746: Replace the views grid table template with one using divs!

Views Responsive Grid provides a views plugin for displaying content in a responsive(mobile friendly) grid layout. Rather than trying to force the standard Views grid display to work for mobile this provides the same functionality, but in DIVs instead of tables. Provided is also the ability to specify a horizontal or vertical grid layout which will properly stack the content on a mobile display.

Installation

  1. Download module and copy views_responsive_grid folder to sites/all/modules
  2. Enable Views and Views Responsive Grid modules.

Features

  • Horizontal or vertical grid layouts
  • Custom classes for use with responsive themes

Requirements

How to Use

After enabling the module, create a new view with the responsive grid display format. Specify the number of columns, and the alignment of the grid.

You'll need to understand that the the module won't provide any default styling to the grid so you may think it's not working, this is by design. In order for the columns to work you'll need to specify the class name of your columns. For example, if your theme utilizes a grid, like Twitter Bootstrap does, you would specify "span3" as the column class(making sure to use the correct span size). This will make sure your column adhere to the grid in your Bootstrap based theme.

Known Issues

Upgrading from 1.0 to 1.1

When updating from 1.0 to 1.1 you will need to re-save your responsive grid views with updated class names.

Sponsorship

LevelTen Logo
This module is sponsored and developed by LevelTen Interactive. LevelTen is a full service interactive agency focused on building online brands by integrating digital strategy, Drupal development and internet marketing. Feel free to connect with us on Twitter and Facebook

If you would like to learn how to build smarter marketing websites with Drupal, checkout the Drupal Site Success! ebook

Project Information

Downloads