How to display GravityView entries in a grid (or columns) using CSS

GravityView makes it easy to display your entries in a variety of layouts. If you want to show your entries in a grid or columns, you can do this by adding a small amount of custom CSS. GravityView provides a built-in way to add custom CSS directly to your View, making this process even easier.

Where to add the CSS

You can add custom CSS directly to your View using the built-in “Custom Code” feature.

Edit your View in the WordPress admin.
In the right sidebar, find the Settings metabox.
Click the Custom Code tab.
Paste your CSS into the Custom CSS textarea.
Click Update to save your View.

For more information, read the Custom Code article.

CSS for Each Layout

Layouts have different HTML structures, so they require slightly different CSS.

Layout Builder layout

.gv-layout-builder-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Change 3 to the number of columns desired */
  gap: 24px; /* Adjust the gap as needed */
  align-items: start;
}

.gv-layout-builder-container .gv-layout-builder-view {
  min-width: 0;
  align-self: stretch; /* Equal height: remove this line if you don't want equal heights */
}

List and Maps layouts

.gv-list-multiple-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Change 3 to the number of columns desired */
  gap: 24px; /* Adjust the gap as needed */
  align-items: start;
}

.gv-list-view {
  min-width: 0;
  align-self: stretch; /* Equal height: remove this line if you don't want equal heights */
  display: flex;
  flex-direction: column;
}

.gv-grid.gv-list-view-content {
  flex-grow: 1; /* Allows content to fill available vertical space */
  display: flex;
}

DIY layout

.gv-diy-multiple-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Change 3 to the # of columns desired */
  gap: 24px; /* Adjust the gap as needed */
  align-items: start;
}
.gv-diy-view {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: stretch; /* Equal height: remove this line if you don't want equal heights */
}

Tips

Change the number in repeat(3, 1fr) to set your desired number of columns.
You can control the space between your grid items by changing the gap value.
If you use multiple layouts, add the CSS for each layout you use.

That’s it! You have columns.

Your GravityView entries will now display in a grid with the number of columns you have defined in the CSS.