CSS for setting up a grid layout using the Participants Database responsive list display

pdb-list-grid.css

/*

Stylesheet for setting up a CSS grid layout for the 
Participants Database responsive list display

*/

/* this is to hide unneeded elements */
.pdb-list-grid .pdb-field-title,
.pdb-list-grid h5 {
  display: none;
}

/* sets up the grid container */
.pdb-list-grid .list-container {
  display: grid;
  /* sets up the columns: here we set up 3 equal columns */
  grid-template-columns: 1fr 1fr 1fr;
  /* this defines the amount of space between the elements */
  grid-gap: 2.5em 5%;
}

/* this styles each record section */
.pdb-list-grid section {
  /* don't need margins, the grid does this for us */
  margin: 0;
}

/* make the data fields sit next to each other */
.pdb-list-grid .pdb-field {
  float: left;
  margin-right: 1ex;
}

/* this makes the 4th field start on a new line */
.pdb-list-grid .pdb-field:nth-child(4) {
  clear: left;
}

/* this styles the photo field */
.pdb-list-grid .pdb-field:first-child {
  margin: 0;
  overflow: hidden;
}

/* sets the size of the image element */
.pdb-list-grid .pdbiex-image-field-wrap,
.pdb-list-grid .image-field-wrap img {
  width: 100%;
  height: auto;
}

CSS sheet for the article "Using Grid Layouts with Participants Database"

This assumes a shortcode similar to this:

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