Steve Jobs once said that design is not just about how something looks, but also how it works. While that’s true, the reality is that people think more of appearance when we talk about design than the inner workings of an object. “Woops that site has a really amazing design”, well, meaning it has an amazing appearance, not just that it works so well. “I need to hire a web designer not a web developer”, well, he means he is looking for someone to customize the visual aspects of the website, not tinker with how things run in the metal.

But design is not just something that only Steve Jobs or the recent generations have taken seriously. Complex designs have been present since antiquity. We majorly talk about Grid design today, and it’s tempting to think of it first being used in the web. However, we couldn’t be far from the truth. Grid design has been applied for a very long time.

Most information is often presented as a list of posts. This is very effective and quite common. However, there are alternatives which to some people like myself prefer. One such alternative is Grid design or it’s variations like Masonry.

I love using Grids in my blogs to display posts. I intuitively prefer it to lists, especially if you have lots of posts.

One very good example of where it’s implemented quite well is the WordPress plugins’ portal.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/981838375.png” alt=”Grid Design” />

It’s much easier to browse through thousands of plugins via a grid than a list. In a single viewport, you can present more plugins than with lists. Lists would require a lot of scrolling. Grids always look more compact compared to lists. Say you want to search a plugin, you don’t have to scroll to the top to find search form, yet it displays more plugins per viewport than the lists. Grid design makes efficient use of space.

The majority of folk tend to use grids only with media files like images and videos. Sites like YouTube and Pinterest use a lot of grids to display galleries of videos or images. However, grids can be very good with posts as well.

Objectives

The objectives of this tutorial is to show how to:
– Employ Grids in showing of posts.
– Show posts in Collapsible list.
– Show posts in Scrollable list.
– Paginate posts, and navigate among pages via Ajax.

Installation

We are using the ‘Post Grid & List for WordPress – Content Views’ plugin. Let’s install it:

1. Head over to WordPress plugins portal. Search ‘grid’.
   HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/990709421.png” alt=”Install Content Views” />
2. Click ‘Install Now’ button to install our plugin.
3. Click ‘Activate’ button to activate it.

Creating a Grid

You can create unlimited Grids with this plugin. Once the plugin is activated:

• Click the ‘Add New’ menu item under the content views as shown below.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/224090589.png” alt=”Add New Page” />

• Type the Grid name then choose the content type. Leave the ‘Limit’ section blank as I have done below if you prefer to have all the posts available for display in the grid. Note that this is not pagination, we shall be able to page these posts later.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1969337695.png” alt=”Grid Name and Type” />

• Select Filter and Sort methods.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1202227659.png” alt=”Filter and Sort Methods” />

• Next let’s move over to the ‘Display Settings’ tab.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/982980973.png” alt=”Display Settings” />

• From the above you can see we have three types of layouts: Grid, Collapsible list and Scrollable list. Let’s choose grid, we’ll see a demo of the other two later.

• Our grid is responsive, it will adjust appropriately to a device’s resolution. Choose the number of columns you would love to be shown per device. It’s only wise you show a single column in a mobile device.

• Choose how you would like the image and text to be displayed.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/826106672.png” alt=”Title and Thumbnail Settings” />

• Choose the fields you would like shown per grid, e.g. title, content, categories etc.
  HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/670294499.png” alt=”Content and Meta Fields” />

• Choose whether you would like the posts to be paginated. You can then navigate to the next page either via Ajax or by full page loading.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1425308421.png” alt=”Pagination Settings” />

RESULTS

Grid

Here’s our grid with images, text and categories.

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/954140997.png” alt=”Grid result” />

Collapsible List

You can also choose to display collapsible list instead of grid. Just choose it in the radiobutton as below:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/944433154.png” alt=”Choose Collapsible” />

Here’s the result:
HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/613623019.png” alt=”Collapsible with pagination” />

Scrollable List

You can choose to display a scrollable list as below:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1589257359.png” alt=”Choose Scrollable” />

Then you get this as the result:

HP_NO_IMG/data/uploads/users/a4c0adcd-8650-4b65-9b01-9dd628e70757/1876983164.png” alt=”Scrollable Result” />

Conclusion

In this post we have seen how to use it to create grid posts, Ccollapsible lists as well as scrollable lists. Our plugin enables us implement numbered pagination. We could then navigate pages either via Ajax or full page loading.

A single grid could contain fields like title and content as well as an image. Moreover, we can easily set the number of columns to display per device. We have agreed that a mobile should in most cases have a single column. Let’s therefore go ahead and implement the grid design in our blogs.