Repeating Elements not affected by Grid

Hello friends! So, try as I might, I can't seem to get a repeating element to format in the way that I'm wanting.  It sits within another grid element, as you'll see below.  I recognize that there are elements like "repcontainer" that are seen by users and not authors, but everytime that I've attempted to target them for formatting it hasn't gone to plan. So far, I have the fieldset wrapped inside of a div ("itembox") that is itself a child of "inventory" which has been styled more or less how I'd like it to be using the Grid.  At any rate, I'm not really sure how to get the repeating elements to behave.  Did I miss something in the guides about repeating elements not being compatible with CSS Grid? I imagine there is a simple solution somewhere, but I'm not yet finding it.  I'm still working out how to apply things I learn about CSS outside of roll20 to roll20. Here's the html of the relevant section: < h3 class = "h32" > Inventory </ h3 >     < div class = "grid1 inventory" >         < input type = "text" class = "label totalenc" value = "Max" readonly />         < input type = "text" class = "content totalenc1" name = "attr_total_enc" value = '(@{strength} * 6)' disabled = "true" />         < input type = "text" class = "label currentenc" value = "Current" readonly />         < input type = "text" class = "content currentenc1" name = "attr_current_enc" value = "@{current_enc}" />         < input type = "text" class = "label obsidian" value = "OBS" readonly />         < input type = "text" class = "content obsidian1" name = "attr_OBS" />         < div class = "itembox" >         < fieldset class = "repeating_inventory" >             < div class = "itembox1" >                 < input type = "text" class = "label item" value = "Item" readonly />                 < input type = "text" class = "content item1" name = "attr_item_name" />                 < input type = "text" class = "label enc" value = "ENC" readonly />                 < input type = "text" class = "content enc1" name = "attr_item_enc" value = "0" />                 < input type = "text" class = "label amount" value = "Amt" readonly />                 < input type = "text" class = "content amount1" name = "attr_item_amount" value = "0" />                 < div >                 < textarea name = "attr_inventory" class = "itemdetails" ></ textarea >                 </ div >             </ div >         </ fieldset >         </ div >     </ div > and the relevant css section. (The inputs are being styled by another section which I can include if need be): /* Inventory */ .inventory {   justify-content : center ;   width : auto ;   max-width : 28em ;   border : 0.1em solid #7DE8F4 ;   background : rgba ( 14 , 47 , 54 , 0.5 );   box-shadow : 0 0 5px 3px #092732 ;   border-radius : 5px ;   padding : 0.5em ;   color : #7DE8F4 ;   display : grid ;   column-gap : 0.2em ;   grid-template-columns : 4.5em 4.5em 4.5em 4.5em 4.5em 4.5em ;   grid-template-rows : repeat ( 2 , auto );   grid-template-areas :     "totalenc totalenc1 currentenc currentenc1 obsidian obsidian1"     "itembox itembox itembox itembox itembox itembox" ;   row-gap : 1em ; } .itembox {   justify-content : left ;   max-width : 30em ;   color : #7DE8F4 ;   display : grid ;   grid-template-columns : repeat ( 6 , auto );   grid-template-rows : repeat ( 2 , auto );   grid-template-areas :     "item item1 enc enc1 amount amount1"     "itemdetails itemdetails itemdetails itemdetails itemdetails itemdetails" ; } /* inventory grid */ .totalenc {   grid-area : totalenc; } .totalenc1 {   grid-area : totalenc1; } .currentenc {   grid-area : currentenc; } .currentenc1 {   grid-area : currentenc1; } .obsidian {   grid-area : obsidian; } .obsidian1 {   grid-area : obsidian1; } .itembox {   grid-area : itembox; } /* itembox grid */ .item {   grid-area : item; } .item1 {   grid-area : item1; } .enc {   grid-area : enc; } .enc1 {   grid-area : enc1; } .amount {   grid-area : amount; } .amount1 {   grid-area : amount1; } .itemdetails {   grid-area : itemdetails; } and here is an image of the result, just in case.  Apologies for the quality! (ignore the bottom left, I'm tackling that next)

Untested, but it looks to me like your html has "itembox1" for the repeating section contents, while your css has "itembox".

Fieldsets do not appear on the sheet in the way they appear in your html. It's best to think of them as kind of a set of instructions to Roll20, to "build the sheet this way". There are elements "above" the repeating section that aren't present in the html you create. The takeway from this: don't include a fieldset inside grid, the entire thing will be treated as one cell of the grid. Inside put the grid inside the fieldset. The way I'd create your html is more like this:     < h3 class = "h32" > Inventory </ h3 >     < div class = "grid-organisation" > <!-- this div is used only for organisation, it includes no CSS -->         < div class = "gridbox" > <!-- CSS for grid should be here-->             < input type = "text" class = "label totalenc" value = "Max" readonly />             < input type = "text" class = "content totalenc1" name = "attr_total_enc" value = '(@{strength} * 6)' disabled = "true" />             < input type = "text" class = "label currentenc" value = "Current" readonly />             < input type = "text" class = "content currentenc1" name = "attr_current_enc" value = "@{current_enc}" />             < input type = "text" class = "label obsidian" value = "OBS" readonly />             < input type = "text" class = "content obsidian1" name = "attr_OBS" />         </ div >         < fieldset class = "repeating_inventory" >             < div class = "gridbox" >                 < input type = "text" class = "label item" value = "Item" readonly />                 < input type = "text" class = "content item1" name = "attr_item_name" />                 < input type = "text" class = "label enc" value = "ENC" readonly />                 < input type = "text" class = "content enc1" name = "attr_item_enc" value = "0" />                 < input type = "text" class = "label amount" value = "Amt" readonly />                 < input type = "text" class = "content amount1" name = "attr_item_amount" value = "0" />                 < div >                      < textarea name = "attr_inventory" class = "itemdetails" ></ textarea >                 </ div >             </ div >         </ fieldset >     </ div > Notice that the grid is separately assigned to the headings before the fieldset, and also to the inside of the fieldset (technically, each row of the fieldset). It is possible to do it the way you have, but the CSS is more complex. This way just works. (Also, unreleated, you might not need to put that last textarea inside a div - you can assign whatever CSS you want to assign to the div directly to the textarea. Generally, if a div contains a single element, you usually don't need the div.)

By the way, several of your input boxes don't have names, which means they won't work. It looks like some of them are intended to be spans, which are better than inputs for text you create at the start and never change.

Worked like a charm! Thank you Gigs! I'm slowly getting the hang of this.  Also, regarding the input boxes, much of their style thus far has been adjusted in the css by targeting input[type="text"], will I be able to change those into spans and simply copy the styling over? Thank you once again!

You might need to adjust the styling a bit, spans and inputboxes don't have the same default styles. You can target each in CSS without changing classnames, by including the element. You can do span.classname { &nbsp;&nbsp;&nbsp; /* this targets just the span */ } input[type="text"].classname { &nbsp;&nbsp;&nbsp; /* this targets just the input */ } .classname { &nbsp;&nbsp;&nbsp; /* this targets both */ } so you could see how close they are, then adjust just one of them to match the other. This would be a good time to plug my site. The CSS index: <a href="https://cybersphere.me/guide-to-css-styling-a-character-sheet/" rel="nofollow">https://cybersphere.me/guide-to-css-styling-a-character-sheet/</a>