Using Views Responsive Grid in Drupal 7
In response to Mark's post, Converting Views List Into Responsive Stacked Columns, we've teamed up to create a module for just this sort of thing. Views Responsive Grid is a views display format plugin designed to give you the proper HTML structure for creating CSS grids. Although still a sandbox project, we're working to get it through the application queue quickly.
Views Responsive Grid gives you all of the functionality of the default grid style, but without all of the ugly tables. It also gives the user the ability to utilize custom classes already in their theme to properly layout the columns. Responsive themes will allow grid items to stack(like a list) according to the proper sort order set inside the view.
How to Use
After downloading and enabling the module, create a new view with the responsive grid display format. Specify the number of columns, and the alignment of the grid.
- Horizontal grids denote how we read, left to right, top to bottom.
- Vertical grids are more closely related to how you see a newspaper laid out; top to bottom, left to right.
Lastly, you'll need to understand that the the module won't provide any default styling to the grid. 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 "col-sm-3" as the column class (making sure to use the correct span size). This will make sure your column adheres to the grid in your Bootstrap based theme.
Try it out, and tell us what you think in the comments below!
UPDATE: This is no longer a sandbox project and can be found here http://drupal.org/project/views_responsive_grid.
