Arranging The Rows of a Repeating Section

In this post we are going to exploit the structure of a repeating section, and change how a repeating section is displayed.

Arranging Rows Horizontally

In HTML and CSS there is usually more than one way to do what you want. There are at least three ways to change the layout of a repeating section in this way. All use the display property.

The example on the CSS Wizardry guide of the Roll20 wiki uses display:inline-block, something like this.

[data-groupname="repeating_example"] .repitem {
    display:inline-block;
    color:red;
}Code language: CSS (css)

The CSS Wizardry page suggests slightly different code than shown here. It uses the > character – that means .repitems that are direct children of the .repcontainer are affected. But Roll20 doesnt allow nested fieldsets, so the only repitems under repcontainer will always be directlly below it. Thus, we don’t need the > character right now.

That said, Roll20 may one day allow nested fieldsets. Assuming they are built the same way, > might very well be needed. So there’s no harm in including it now to future proof your code. That would look like:

[data-groupname="repeating_example"] > .repitem {
    display:inline-block;
    color:red;
}Code language: CSS (css)

The color: red style is just a placeholder to show an example of other styling. I’d probably delete it once I have the stylying sorted how I want it.

Using CSS Grid

You can also use display:grid to change the layout. Remember that with grid, it assumes you are working on child elements so we don’t need to specific .repitem – they are always child items of .repcontainer.

[data-groupname="repeating_example"] {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5px;
    color:red;
}Code language: CSS (css)

[data-groupname="repeating_example"] .repitem {
    border: 1pt solid red;
    margin-bottom: 5px;
}Code language: CSS (css)

The code above (both bits) produces the image below. I’ll draw attention to a few things.

Since this is a CSS Grid, which always works on child items, we don’t need to explicitly list the repitem in the first declaration block. By choosing a repeat(3), it places exactly 3 repitems in that space, and anything inside thoose items might go onto a second line. If there were four rows, the 4th row would cross over into a new line since this grid assumes 3 columns.

The second declaration block does expressly state the repitem because we are giving the repitem a border. The margin is for when we have more than three rows, to make sure any extra rows don’t come too close. (Try it.)

Other Solutions

The third method is using display:flex, which is a lot like grid. I’ll leave that as an exercise for the reader.

You can change the presentation in other ways. CSS and the [data-groupname=”repeating_example”] syntax gives you a lot of power. Have fun!