How to Show Search Results in Grid Format in Genesis

Showing posts in grid format is a good idea because it improves the visibility and aesthetic appeal of your blog posts, archives and related posts.

When it comes to using grid format in Genesis, most of us usually use it to on our blog archives or related posts. This can be done by either using a plugin or modifying your functions file.

However, if you want to show search results in grid format, you will need to follow a whole new approach.

In this guide, let’s talk about how to show search results in grid format.

Essentially, we will follow three steps to complete this task:

Step #1: Create a Custom Loop

Create a new file within your active theme and name it “search.php” and then copy and paste the following code.

Step #2: Show Search Results in Grid Format

Add the following code to your functions file. The code shows three columns by default but if you want to increase or decrease the number of columns, you need to make necessary adjustment in the code.

Step #3: Customize Your Look

Finally, you need to customize the appearance of your grid columns by tweaking the stylesheet. For the sake of this guide, I added the following code.

.search .site-inner {
max-width: 100%;
}

.search .entry {
margin-bottom: 0;
padding: 30px;
padding-bottom: 0;
}

.search .entry-title {
font-size: 29px;
font-size: 2.9rem;
}

That’s it! Let me know if you have any questions.