Article

Responsive Grid Modules for Views in Drupal 7: Best Modules and How to Use

There are a lot of grid modules for Views in Drupal 7. Below are some of the views grid modules for Drupal 7 that works well out of the box, at with some configurations as required. Listed are some some challenges and best features for the following grid modules:

BX Slideshow

  • Can have more than 1 row, cool enough to have the whole grid slide to the next set and so on, hence the name
  • Disadvantage, out  of the box, it seems you the sorting of the items is vertically from top to bottom (first colum, then to the second colum, and so on), there seems to be no setting to have it horizontally without setting up another set-up like putting manual weight or order for the items; also the wrappers seem to be limited to columnar, therefore separating one item from another for any CSS implementation is tricky; 
  • Has lots of other useful slideshow settings though - row count, speed, transition, margins, slide counts, etc.

Grid

  • Out of the box, can have more than 1 row depending on setting up of items per row
  • Vertical or horizontal ordering or sorting
  • Disadvantage, out of the box, it seems not responsive and adaptive enough without setting up advance CSS implementations; works as expected on desktop view, on mobile or responsive displays, more custom CSS work is needed

Bootstrap Grid

  • Very recommended, easy to use, straightforward settings, works well out of the box with little or no changes required
  • Out of the box, works well; settings such as - alignment, straightforward number of items for different device display sizes, etc.
    Bootstrap Grid module for Drupal 7 Views

Responsive Grid

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.

How to Use Responsive Grid Module for Views

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.

Lear more here on how to use Responsive Grid, with actual step by step demo instructions and illustrations.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
To prevent automated spam submissions leave this field empty.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
4 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.