Relationship (Post) field render options

By default, Advanced Views displays the Relationship field as post link(s). You can customize the Layout template to change how it's rendered:

1. Posts List

To display all the items in a single row, you can use the CSS Flexbox:

#layout__terms {
display: flex;
gap: 10px;
}

2. Posts Grid

Repeater items as a Grid

To display items as a grid, start by creating a detailed Layout for each item by assigning a Field Layout, as described here. Once your Field Layout is set, you can transform the display into a grid using CSS Grid. Simply add the following CSS code to your Layout to achieve the desired grid layout:

#layout__post-object {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#layout__post-object {
  grid-template-columns: repeat(3, 1fr);
 }
}

Make sure the class in the CSS fits the field class from the markup. By changing the value of the grid-template-columns property, you can control the number of columns in your grid.

3. Posts Slider (Pro)

Advanced Views comes with a set of pre-configured JS libraries, so you can easily turn the post object items into a slider.

After adding the repeater field to the target Layout, change the 'Enable Slider' option to 'Splide v4' and press the Save button. It'll automatically change the field markup to incorporate the necessary classes, and add the default JS instance:

var post_object = this.querySelector('.avf-layout__post-object');
if (post_object) {
	/* https://splidejs.com/guides/options/ */
	new Splide(post_object, {
		type: 'loop',
		perPage: 1,
		perMove: 1,
	}).mount();
}

You can customize it according to your needs, using any available Splide options.