Modern Styles: a fresh look for your Views
GravityView 3.0 introduces Modern Styles, a setting that gives your View a refreshed, modern design that works with every layout and WordPress theme.
Modern Styles does two things, and the second one is optional. On its own, it restyles your existing View while keeping its current layout. If you want, it can also arrange your entries into a multi-column card grid, where each entry becomes a self-contained card. This article covers both, plus how to fine-tune the result with Custom CSS.
How to enable Modern Styles #
- Open the View you want to update in the WordPress editor
- In the View Settings panel, click the Styles tab
- Check the box labeled Enable Modern Styles
- Click Update to save your View
By default, Grid Columns is set to 1, so your View stays in a single column. Enabling Modern Styles on its own simply gives your existing View a refreshed look without changing its layout. For many Views, this is all you need, and you can stop here.
Here is the same View with Modern Styles enabled at a single column. Notice the refreshed search bar and the cleaner card around each entry, with no change to the single-column layout.
Displaying entries in a grid (optional) #
The Styles tab gives you two controls for the grid:
| Setting | What it controls |
|---|---|
| Grid Columns | The number of columns of cards. 1 keeps a single-column View; set it higher to create a card grid. |
| Equal Height Cards | When enabled, every card in a row matches the height of the tallest card, so rows stay tidy even when entries hold different amounts of content. |
To create a grid, set Grid Columns above 1, then click Update and preview your View. A card grid works well for directories, team or staff listings, portfolios, and product catalogs, where each entry reads better as a tile than as a row.
Choosing how many columns to use #
There’s no single correct number of columns. It depends on how much content each entry holds and how you want the View to read. As a starting point:
- One column works for detailed entries, longer content, or when you simply want Modern Styles for the refreshed look.
- Two columns suit listings that mix short text with a small image.
- Three or more columns fit compact cards, such as a photo gallery or a directory of brief profiles.
It’s worth trying a couple of values and previewing each before you settle on one.
Before and after #
Comparing the same View in three states makes the change easy to see:
- Modern Styles off: your View’s default appearance.
- Modern Styles on, one column: the same View, restyled, with no layout change.
- Modern Styles on, multiple columns: the same entries arranged as a card grid.
Here is the starting point, with Modern Styles turned off:
Modern Styles with the Table layout #
Modern Styles isn’t only for the List layout. Because it works with every layout, you can switch it on for a Table View too, and it refreshes the table’s appearance without changing your columns or your data. The rows and columns stay exactly where they are; Modern Styles simply cleans up the search bar, borders, spacing, and links to match the fresher look.
Here is a Table View with Modern Styles turned off, showing the default table appearance:
And here is the same Table View with Modern Styles enabled. Notice the refreshed search bar with its rounded panel and bottom-right Search button, the lighter table borders, and the roomier row spacing, while the columns stay exactly as they were:
How the grid behaves on different screens #
Modern Styles is responsive. On larger screens, your entries display in the number of columns you set with Grid Columns. On smaller screens the grid adapts, and on phones it stacks into a single column so each card stays readable. You don’t need media queries or custom breakpoints for this to happen.
Fine-tuning with Custom CSS #
For anything beyond Grid Columns and Equal Height Cards, use the Custom CSS box on the same Styles tab. When Modern Styles is on, your Custom CSS is automatically scoped to that View, so your rules won’t affect other Views or content elsewhere on the page. You can also use the VIEW_SELECTOR, VIEW_WRAPPER, VIEW_ID, and GF_FORM_ID placeholders to target the View precisely. Learn more about CSS placeholders.
Tips and notes #
- A single column is the default, and it’s a perfectly good way to use Modern Styles. The card grid is entirely opt-in
- Modern Styles works with every layout and adapts to your theme’s colors and fonts
- It works with your existing field configuration, so you don’t need to rebuild your View to use it
