Change the direction of the Repeater Layout Control (How-to)

To change the Repeater Layout Control from its default column to a row (as shown in picture) you need to follow the steps below.

Create your inner view for the repeater control
In the Repeater Layout Control connect your view, collection and add a class

Add styling to the class

.hubRepeater {
    display: grid!important;
    grid-template-columns: auto auto auto auto;
    justify-content: center;
}

.hubRepeater div {
    width: 300px!important;
    border-radius: 12px!important;
    text-align: center!important;
    padding: 0px!important;
    cursor: pointer!important;
}

.hubRepeater .card {
    margin: 5px!important;
}

Manipulate and style as you like

To generate the different colors use the the ":nth-child()" pseudo-class:

.hubRepeater .card:nth-child(1) {
    background-color: #dadaff!important;
    border: 3px solid #e5e5fa!important;
}

.hubRepeater .card:nth-child(2) {
    background-color: #baf8da!important;
    border: 3px solid #e0fffd!important;
}

.hubRepeater .card:nth-child(3) {
    background-color: #ffddef!important;
    border: 3px solid #f7cce2!important;
}

.hubRepeater .card:nth-child(4) {
    background-color: #faeebf!important;
    border: 3px solid #fff7dc!important;
}   

.hubRepeater .card:nth-child(5) {
    background-color: #ffdab9!important;
    border: 3px solid #f3c399!important;
}