> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/relational/relationship-field/render-options.md).

# Relationship (Post) field render options

By default, Advanced Views [displays the Relationship field](/advanced-views/field-types/relational/relationship-field.md) as post link(s). You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to change how it's rendered:

## 1. Posts List <a href="#as-a-list" id="as-a-list"></a>

To display all the items in a single row, you can use the CSS [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox):

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

## 2. Posts Grid

<figure><img src="/files/IWrF29PtfYAcOkXWgP2l" alt=""><figcaption><p>Repeater items as a Grid</p></figcaption></figure>

To display items as a grid, start by creating a detailed *Layout* for each item by assigning a Field Layout, as described [here](/advanced-views/field-types/relational/relationship-field.md). Once your Field Layout is set, you can transform the display into a grid using [CSS Grid](https://www.w3schools.com/CSS/css_grid.asp). Simply add the following CSS code to your *Layout* to achieve the desired grid layout:

```css
#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)

<figure><img src="/files/AdhHqJ4tVpuIL5xCOyFy" alt=""><figcaption></figcaption></figure>

Advanced Views comes with a [set of pre-configured JS libraries](https://docs.advanced-views.com/display-content/front-end-assets-management-pro), 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:

```javascript
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](https://splidejs.com/guides/options/).