---
title: "How to display GravityView entries in a grid (or columns)"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/displaying-entries-as-a-grid-in-columns/"
---

GravityView makes it easy to display your entries in a variety of layouts. To show your entries in a grid or columns, you have two options: apply a Vantage theme and set the number of columns (no code, recommended), or add custom CSS for full control over the grid. This article covers both.

## Method 1: Use a Vantage theme (no code)

GravityView 3.0 introduced built-in themes. The quickest way to show your entries in a grid is to apply the **Vantage** theme and set how many columns to use, 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)

## 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](/article/962-view-settings-custom-code).

## CSS for Each Layout

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

## Layout Builder layout

```
.gv-layout-builder-multiple-container .gv-layout-builder-view--entry +
  .gv-layout-builder-view--entry {
    margin-top: 0;
  }

```

```

```

## 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.