Styling a node listing using a grid display

In this recipe, we will look at the ease with which we can represent the node view created in the previous recipe as a gallery, by styling the view as a grid. A grid will allow us to achieve a gallery-like feel with each cell in a table layout representing a row from the result set.

Getting ready

We will be using the product_gallery view created earlier in the previous recipe. Additionally, we will be using the ImageCache module, as we saw in the last chapter, to create the thumbnail for the ImageField being used in the product node type. Create an ImageCache preset named product_thumb which performs a Scale and Crop operation to create a thumbnail of size 150px x 150px as in the following screenshot:

This recipe also makes use of the myzen theme created earlier in this book to hold our CSS customizations.

How to do it...

To achieve a gallery-like representation of the product nodes, we will be adding a new display to the product_gallery view as follows...