Posted on by

Using Grid Layouts with Participants Database

If you’re looking for a compact and visually striking way to show records from Participants Database, a Grid is a great way to go. Modern browsers all support grid layouts using the CSS3 Grid display mode, and it makes it easy to get great grid layouts with a few simple CSS rules.

In this tutorial I’ll show you how to use a built-in template for the List display to show a grid layout for your list. There are a lot of ways to get this done, but what I want to provide here is a simple way to get a grid layout simply and quickly with enough explanation for someone with some HTML and CSS skills to set up their own grid.

Here is a demo of the grid layout: Participants Database List Grid

Setting Up the Basics

This tutorial is going to show you how to get a grid layout using the built-in “responsive” template because it provides the right kind of HTML structure. Instead of showing the data in a table, it places each record in it’s own container which can be formatted and arranged just using CSS.

Of course, more possibilities are available by using a custom template, and if you’ve got the skills and the need for that, it’s really the best way to go. However, in this tutorial, I wanted to show what is possible without a custom template.

First, we set the list shortcode to use the responsive template like this: [pdb_list template=responsive] This will give us the HTML structure needed to set up the grid.

Setting Up the Content for Each Grid Unit

You’ll need to decide which fields you want in each grid unit. You can put this in the shortcode, using the “fields” attribute to name the fields to include, and the order to include them in…for example: [pdb_list template=responsive fields="photo,first_name,last_name,city,state"]

This really works best if there is content for all the fields in all the records…especially an image…because it can be tricky to make them all look the same if they have missing pieces. The grid effect relies on them all having a similar appearance. For this reason, things like long chunks of text probably won’t work well. If you want to do something like that, you’ll need to use a custom template to help manage the text blocks.

Placing the CSS Rules

Participants Database provides a convenient location for your CSS rules in the plugin settings under the “Custom CSS” tab. You can copy and paste the rules we’ll be putting together here into that setting and they will only get loaded on a page with Participants Database content.

The Shortcode

For the purpose of this demonstration, we will place a special classname on the display so that only this special list display will be affected. Here is the complete shortcode used for this tutorial:

[pdb_list template=responsive fields="photo,first_name,last_name,city,state" class="pdb-list-grid"]

That will give us a classname of “pdb-list-grid” that we can use in our rules so they will only apply to this display.

Using CSS Grid

CSS Grid is a set of properties that can be used to define a content grid. Basically, you set the properties of the grid container and then (if needed) some properties for the grid units. If you want a good overview of the technology in general, I recommend this article over at CSS Tricks: A Complete Guide to Grid

CSS Grids are capable of a lot, it’s probably the most complex feature of CSS3, but we don’t need to do much here: just set up a grid where all of the elements are the same size and have the same internal layout.

At the bottom of this article is the stylesheet for this tutorial. If you look at the rule for “.pdb-list-grid .list-container” on line 15, you’ll see how the grid is set up. First, we make the container a grid container. The next declaration defines the columns. In this case, we are defining 3 equal columns using the “fr” unit. Free Space (fr) units are a convenient way to define column widths because they proportionally allocate the free space inside a container. This is useful because that means we can define the space between the elements to be anything we want without breaking the layout: the free space unit allocates the space that is left over after the space between the elements has been taken into account. In a fr unit, the number is a proportion: all three are set to 1, so they will all be the same width. If, for instance, one was set to 2, that column would be 2x the width of the ones set to 1.

The third declaration sets the gap between the grid items. The first value is the gap between the horizontal rows, the second is the gap between the columns. The row gap we set to a specific value because percentages won’t work for a vertical dimension. Using em as the unit makes the gap proportional to the font size. We set the column gap to 5% so that it will be proportional to the width of the overall grid—this will help make the grid layout more responsive.

Because we’ve used the fr units to define the column widths, we can change the column gap to anything we want, and we’ll always get 3 equal-width columns.

Modifying the CSS

You will need to have some understanding of CSS in order to adapt this to your own case, because many of the rules we include here are specific the the fields we are presenting and how we want to present them.  If you change the kind of fields that are shown, or the order you want them shown in, it probably won’t look right with the rules given here. You’re going to need to understand how to change it so your content grid looks the way you want.

The easy things to change are the number of columns and the gap between the units (each unit is one Participants Database record). For example, you could easily make it 4 columns with a declaration like this:
grid-template-columns: 1fr 1fr 1fr 1fr;

Check the CSS Tricks article I linked to above for more details on what you can do to change the layout.

Formatting Inside Each Unit

For the purposes of this tutorial, we are using only 5 fields from Participants Database: a photo, then on the next line we show the first and last name. The third line has the city and state. All of the rules from line 29 on are specific to laying out these fields in this way.

For instance, for a good-looking grid, we will want to standardize the size of the images. In many cases, the image sources will be of different sizes, so we use the rule on line 47 to set the size of the image to match the width of the grid unit.

The rest of the fields are floated so that they will sit next to each other on the left side of the container. Since we want the location fields to start a new line, we add a “clear” to the first location field: this is done on line 36. We are using the “nth-child” selector, so if the order or number of the fields is different in your case, you’ll need to change this.

Really, the best way to get full control over the layout is to use a custom template, so if you have the skills to take advantage of that I suggest you go that way. Several of the rules we use here (line 9 for instance) are needed because we are using a built-in template. If you used a custom template, you wouldn’t have to do any of that.

The CSS Rules

Here are the style rules we are using to set up our grid. By clicking on the link at the bottom of the code window, you can copy the rules and use them on your site as a starting point for your own grid CSS. One easy way to do that is to paste these rules into the “custom CSS” setting for Participants Database.

Leave a Reply
You have to agree to the comment policy.

Leave a Reply
You have to agree to the comment policy.