> 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/layout/repeater-field/render-options.md).

# Repeater field render options

By default, Advanced Views [displays the Repeater field](/advanced-views/field-types/relational/taxonomy-field.md) row by row, following each subfield type. You can [customize the *Layout* template](/advanced-views/layouts/code-fields/custom-template.md) to change how it's rendered:

## 1. Grid from Repeater items

<figure><img src="/files/3UFFwTzButqLytU6yH8B" alt=""><figcaption></figcaption></figure>

You can turn any repeater into Grid, using the [CSS grid feature](https://www.w3schools.com/CSS/css_grid.asp), by adding the following to the CSS code field in the CSS & JS tab of your *Layout*:

```css
#layout__repeater {
 display: grid;
 grid-template-columns: 1fr;
 gap: 20px;
}

@media screen and (min-width:992px) {
#layout__repeater {
  grid-template-columns: repeat(2, 1fr);
 }
}
```

## 2. Slider from Repeater items

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

Advanced Views Pro 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 repeater items into a slider.

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

```javascript
var repeater_inner = this.querySelector('.pro-fields__repeater-inner');
if (repeater_inner) {
	/* https://splidejs.com/guides/options/ */
	new Splide(repeater_inner, {
		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/).

## 3. Custom Repeater items order

### 3.1) Picking up a random row

Using the [random Twig function](https://twig.symfony.com/doc/3.x/functions/random.html), you can pickup a random row:

```twig
{% set randomItem = random(repeater.value) %}
{# todo work with the item as usually: randomItem.subfield.value #}
```

### 3.2) Custom items sorting

Using the [sort Twig filter](https://twig.symfony.com/doc/3.x/filters/sort.html), you can sort the array by any sub field. The code example below sorts the repeater items by the year sub field in Ascending order:&#x20;

```twig
{% for item in repeater.value|sort((a, b) => a.year <=> b.year) %}
{# todo print item fields #}
{% endfor %}
```

{% hint style="info" %}
To turn it into Descending order, just put the **b** to the left side (and **a** to the right).
{% endhint %}