---
title: "Displaying a List View in a grid (two or more columns)"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/displaying-a-list-view-in-two-or-more-columns/"
---

The GravityView List View Type allows you to display entries one after the other in a directory-style layout (in a single column). However, sometimes, you may wish to display entries in a grid-style layout using multiple columns. There are two ways to do this: apply a Vantage theme and set the number of columns (no code, recommended), or add custom CSS to the List layout. This article covers both.

### Prefer to Watch the Video?

https://www.youtube.com/watch?v=HRRQBGizqII Here's what the list layout looks like with a single column:

![List view of user profiles with pictures and "View Profile" links](https://www.gravitykit.com/wp-content/uploads/2025/10/file-AvR3xio9xX.jpg)

## Method 1: Use a Vantage theme (no code)
GravityView 3.0 introduced built-in themes. Applying the **Vantage** theme and setting the column count turns your List View into a modern, responsive card grid, with no CSS required
Open the View in the WordPress editor, then in the **View Settings** panel:

- Click the **Styles** tab.
- Under **Theme**, choose **Vantage**.
- Set **Columns** to the number of columns you want (2 or more for a grid).
- Click **Update** to save the View.

![The View Settings panel with the Styles tab selected, showing the Theme set to Vantage and the Columns control](https://www.gravitykit.com/wp-content/uploads/2026/06/GravityView_View_Settings_Styles_tab_with_the_Vantage_theme-1024x699.png)
With **Columns** set to 2 or more, GravityView arranges your entries as a card grid:![A GravityView View with the Vantage theme applied, showing entries in a three-column card grid](https://www.gravitykit.com/wp-content/uploads/2026/06/modern-styles-card-grid-1-1024x621.png)
*For more on themes and column options, see [Themes: a fresh new look for your Views](https://www.gravitykit.com/docs/gravityview/view-settings/modern-styles/)*

## Method 2: Add custom CSS (advanced)

By adding some simple CSS styles, we can create a multi-column layout, like this:

![Grid layout of six professionals with names, titles, and profile links](https://www.gravitykit.com/wp-content/uploads/2025/10/file-Qg2anESdk6.jpg)
It's simple to achieve this look because each listing is contained inside a DIV tag which uses the class `.gv-list-view`
By adding some additional styles to that class and the View container, we can change the layout from single-column to multi-column.

```

```

The above CSS code will affect every List View on your site. To limit the changes to a specific View, replace `{viewID}` in the CSS below with the ID of the View you wish to modify:

```
 {
    display:flex;
    flex-wrap: wrap;
}

 {
    display:flex;
    flex-wrap: wrap;
}

 .gv-list-view {
    margin-right: 10px;
    width: 250px;
}
```

**Note**: To find the View ID, edit the View. Find the Embed Shortcode in the Publish box. The number displayed in the shortcode is the ID of the View.

To center the entries horizontally, add `justify-content: center` after `display: flex`. If you're unsure how to add custom CSS styles to your website, read: [How to add custom CSS to your website](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-to-your-website/).