Repeating section - alt. layout?

Hey guys, how would I go about possibly making a repeating section which adds new containers in a simple grid pattern?  I.E. it starts in the bottom left, then adds 2 to the right, then skips to the next line and adds 3 on the bottom?  Think it's doable?  Here is the code: <div class="label">Powers</div> <div class="left"> <fieldset class="repeating_powers">     <div class="power">         <div class="row">           <input type="text" name="attr_powername" placeholder="Power"/>           <input type="number" name="attr_powercost" placeholder="0"/>                <span class="powerbuttons">         <button type="roll" name="roll_power" value="&{template:default} {{name= @{name} }} {{FEATURE= @{powername} }} {{DESC.=@{power} }}"/></button>         <input type="checkbox" name="attr_poweruse" value="0"/><span></span>                 </span>                 <br>                          <input type="checkbox" name="attr_powerstandard" id="powerstandard" value="0" /> <label for="powerstandard">S</label>         <input type="checkbox" name="attr_powerpassive" id="powerpassive" value="0" /> <label for="powerpassive">P</label>         <input type="checkbox" name="attr_powerquick" id="powerquick" value="0" /> <label for="powerquick">Q</label>         <input type="checkbox" name="attr_powerfree" id="powerfree" value="0" /> <label for="powerfree">F</label>         <input type="checkbox" name="attr_powermovement" id="powermovement" value="0" /> <label for="powermovement">M</label>         <input type="checkbox" name="attr_powerreaction" id="powerreaction" value="0" /> <label for="powerreaction">R</label>         <input type="checkbox" name="attr_poweroverdrive" id="poweroverdrive" value="0" /> <label for="poweroverdrive">O</label>                  </div>      </div>             <br>  <br>         <div class="feature">        <textarea name="attr_power" class="sheet-open" placeholder="Description"/></textarea>                    </div>          <br> </fieldset> </div> It displays a compact block full of info, some styled checkboxes, and a roll button.  The goal is for each container (about 300px tall) to span 30% of the page, then have 2 more lines of 3 Powers.. i.e. ---Label stretching over 100% of the page--- Original Power ---- Power ---- Power Power-----Power-----Power Power-----Power-----Power. I'm doing this in a repeating section rather than making all 9 boxes because it's obnoxious to label 9 discrete empty power buttons, hehe.  Anything helps - repeating sections are pretty nebulous to me! (By the way the checkboxes are not as obnoxious as the same. I made it so the box is just a letter that lights up when clicked.)

First thing - you cant use id's in roll20 html. ids are for unique elements, and there will be multiple character sheets with the same code so ids cannot be unique. You want to change those ids to classes. If you are just laying out 9 boxes, you are far better off doing them as normal code, not repeating sections. Repeating section attribute names are much harder for players to use, if they want to make their own macros. If you dont want the boxes to show up, hiding them with CSS until they are needed is a good alternative. I'm not following exactly what you want to do with the layout, so cant give advice there, except that it sounds like you probably need CSS Grid.

Here is an example to do two alternating columns: <a href="https://app.roll20.net/forum/permalink/6079762/" rel="nofollow">https://app.roll20.net/forum/permalink/6079762/</a> You can probably adapt it to do three coilumns.

Thanks, Rabulias, I was able to make it work!&nbsp; Actually much easier than I expected.&nbsp; It was just this: .repcontainer[data-groupname=repeating_powers] .repitem { &nbsp; display: inline-block; &nbsp; width: calc(31% - 3px); &nbsp; margin-right: 20px; } Yeah, Gigs, those checkboxes are suddenly proving to be a problem.&nbsp; I had added the IDs when my fancy checkboxes didn't work, and it seemed like the solution for a while.&nbsp; Everything works perfectly in the preview window, but in game they sometimes do nothing.&nbsp; I guess that's because they're getting caught up with info from other sheets.&nbsp; However, simply changing all the "id"s to "class" didn't do the trick; I imagine there was another step?&nbsp; Here, I should probably reproduce my CSS for the checkboxes: .sheet-power input[type="checkbox"], .sheet-cf input[type="checkbox"] { &nbsp; &nbsp; display: none; } .sheet-power label, .sheet-cf label {&nbsp;&nbsp; &nbsp; &nbsp; color: black; &nbsp; &nbsp; cursor: pointer; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; border: none &nbsp; &nbsp; margin-top:-10px; &nbsp; &nbsp; line-height: 15px; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; width: 8px; &nbsp; &nbsp; position: relative; &nbsp; &nbsp; vertical-align: center; &nbsp; &nbsp; background-color: #a0a4e3; &nbsp; &nbsp; height: 15px; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; transition: color 0.3s; } .sheet-power label:hover, .sheet-cf label:hover{ &nbsp; &nbsp; color: #dbd879; }&nbsp; .sheet-power input[type="checkbox"]:checked + label, .sheet-cf input[type="checkbox"]:checked + label{ color: #dbd879; } Worked just fine until I started tinkering with the repeating sections!&nbsp;

Forgot to clarify what I’m trying to do... the goal is to have&nbsp; checkboxes that display only a label, which lights up when clicked. &nbsp;Players should be able to click these on and off to show what type of action each power requires. &nbsp;I thought I had it, but it turns out I only had it in the preview window. &nbsp;Tragic.