Custom Checkbox style, request for help (almost there!)

I've almost got it. I just need somebody to point out the obvious error my eyes won't see. I've styled, using the label substitution method, a clickable image to function as a checkbox. The remaining problem I have is that it doesn't play nice with multiple grid areas. Here's how it looks as written: While this works, It’s not how I’d prefer the layout. The shield image(checkbox) to be on the left. So the grid template areas of afattributes should be: grid-template-areas: &nbsp; &nbsp; "afheader afheader afheader" &nbsp; &nbsp; "imgshieldcol aftype aftypeinput" &nbsp; &nbsp; "imgshieldcol afname afinput"&nbsp; &nbsp; &nbsp; "shieldhidden shieldhidden shieldhidden"; } &nbsp; Only when I do this, aftype/aftypeinput appear beside the imgshieldcol normally, but the afname/afinput shunt down to just below the imgshieldcol. It's sort of in the right place, but not exactly: I've experimented with changing the size (heigh/width) attributes of the shield image to be more responsive to the size of the grid container/s it is in, but anything other than a rigidly defined size results in a tiny, or non-existent image. In this screenshot example I've used auto for width/height (see the tiny grey dot?): Here's the current code snips I think are relevant: .character &nbsp; grid-template-columns: 29% 34% 36%; &nbsp; align-items: stretch; &nbsp; justify-items: stretch; &nbsp; justify-content: stretch; &nbsp; align-content: stretch; &nbsp; grid-template-areas: &nbsp;&nbsp;&nbsp; "common common common" &nbsp;&nbsp;&nbsp; "primaryattributes afattributes finalcombatattributes" &nbsp;&nbsp;&nbsp; "atkdefattributes hpattributes finalcombatattributes" &nbsp;&nbsp;&nbsp; "evaattribute hpattributes finalcombatattributes" &nbsp;&nbsp;&nbsp; "mamdattributes mpattributes classcombatabilities" &nbsp;&nbsp;&nbsp; "steperattributes mpattributes classcombatabilities" &nbsp;&nbsp;&nbsp; "gapfillimg mpattributes classcombatabilities"; } /* Grid layout for attack/defense attributes with image shields */ .afattributes { &nbsp; grid-area: afattributes; &nbsp; grid-template-columns: 1fr 1fr 1fr; &nbsp; grid-template-rows: auto; &nbsp; display: grid; &nbsp; border-style: double; &nbsp; border-width: 6px; &nbsp; grid-template-areas: &nbsp;&nbsp;&nbsp; "afheader afheader afheader" &nbsp;&nbsp;&nbsp; "aftype aftypeinput aftypeinput" &nbsp;&nbsp;&nbsp; "afname afinput imgshieldcol" &nbsp;&nbsp;&nbsp; "shieldhidden shieldhidden shieldhidden"; } /* Grid layout for attack/defense attributes with image shields */ .afattributes { &nbsp; grid-area: afattributes; &nbsp; grid-template-columns: 1fr 1fr 1fr; &nbsp; grid-template-rows: auto; &nbsp; display: grid; &nbsp; border-style: double; &nbsp; border-width: 6px; &nbsp; grid-template-areas:&nbsp; &nbsp; &nbsp; "afheader afheader afheader" &nbsp; &nbsp; "aftype aftypeinput aftypeinput" &nbsp; &nbsp; "afname afinput imgshieldcol" &nbsp; &nbsp; "shieldhidden shieldhidden shieldhidden";&nbsp; } /* Grid areas for attack/defense attributes */ .afheader { &nbsp; grid-area: afheader; } .aftype { &nbsp; grid-area: aftype; } .aftypeinput { &nbsp; grid-area: aftypeinput; } .afname { &nbsp; grid-area: afname; } .afinput { &nbsp; grid-area: afinput; } .shieldhidden { &nbsp; display: none; &nbsp; text-align: center; &nbsp; grid-area: shieldhidden; &nbsp; grid-template-areas:&nbsp; &nbsp; &nbsp; "shielddie shieldbutton"; } /* Grid areas for shield attributes */ .shielddie { &nbsp; grid-area: shielddie; } .shieldbutton { &nbsp; grid-area: shieldbutton; } /* Toggle display of shield-related elements based on shield-toggle input */ input.shield-toggle[value="1"] ~ div.shieldhidden { &nbsp; display: grid; } /* Ensure the image container fits within its grid area */ .imgshieldcol { &nbsp; display: grid; /* Use grid to center content */ &nbsp; align-items: center; &nbsp; justify-content: space-evenly; } /* Style for the checkbox container */ .checkbox-container { &nbsp; position: relative; &nbsp; display: grid;&nbsp; } /* Hide the default checkbox */ .checkbox-input { &nbsp; position: absolute; &nbsp; width: 0; &nbsp; height: 0; &nbsp; opacity: 0; &nbsp; cursor: pointer; /* Ensure the checkbox still responds to clicks */ } /* Style the image */ .checkbox-image { &nbsp; display: grid; &nbsp; width: 51px; /* Set the image width explicitly */ &nbsp; height: 118px; /* Set the image height explicitly */ &nbsp; background: url(' <a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon%20Warriors/DW_Shieldnobg.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon%20Warriors/DW_Shieldnobg.png</a> ') no-repeat center center; &nbsp; background-size: contain; /* Ensure the image scales correctly */ } /* Style the text overlay */ .checkbox-text { &nbsp; position: absolute; &nbsp; top: 50%; &nbsp; left: 50%; &nbsp; transform: translate(-50%, -50%); &nbsp; color: white; &nbsp; font-size: 24px; &nbsp; font-weight: bold; &nbsp; display: none; /* Hide text by default */ } /* Show text when checkbox is checked */ .checkbox-input:checked ~ .checkbox-image ~ .checkbox-text { &nbsp; display: block; } /* Grid area for martial attributes */ .mpattributes { &nbsp; grid-area: mpattributes; &nbsp; border-style: double; &nbsp; border-width: 6px;} &nbsp; &lt;div class="afattributes"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" class="shield-toggle" name="attr_shield" value="0" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="afheader"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label class="boxheading"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Armour &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="aftype"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="aftypeinput"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="text" class="flexitextinput" name="attr_Armour" value="None" readonly /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="imgshieldcol"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label class="checkbox-container"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="checkbox" class="checkbox-input" name="attr_shield" value="1"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="checkbox-image"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="checkbox-text"&gt;&lt;/span&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="afname"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Armour Factor &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="afinput"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input title="Includes Magic and Miscellaneous Bonuses" type="text" class="fourshorttextinput" name="attr_totalaf" value="0" readonly /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Click shield to equip: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/label&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="shieldhidden"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="shielddie"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Roll &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input title="Modified by Guard/Abilities" type="text" class="fourshorttextinput" name="attr_shieldsuccessvalue" value="1" readonly /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; on &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input class="fourshorttextinput" type="text" name="attr_shielddievalue" value="1d6" readonly /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="shieldbutton"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;button class="d20" type="roll" value="&amp;{template:default} {{name=@{character_name} attempts to block with a Shield}} {{Shield roll= [[@{shielddievalue}]]}} {{Target Result= [[@{shieldsuccessvalue}]] }}" name="roll_shieldcheck" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/button&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;

Hi Steve, one option is to use your "desired" grid areas &nbsp;&nbsp;&nbsp; grid-template-areas: &nbsp;&nbsp;&nbsp; "afheader afheader afheader" &nbsp;&nbsp;&nbsp; "imgshieldcol aftype aftypeinput" &nbsp;&nbsp;&nbsp; "imgshieldcol afname afinput" &nbsp;&nbsp;&nbsp; "shieldhidden shieldhidden shieldhidden"; and then just add a position and negative margin to your shield column class to allow the other areas to shift upward. .imgshieldcol { &nbsp;&nbsp;&nbsp; display: grid; &nbsp;&nbsp;&nbsp; align-items: center; &nbsp;&nbsp;&nbsp; justify-content: space-evenly; &nbsp;&nbsp;&nbsp; position: relative; &nbsp;&nbsp;&nbsp; margin-bottom: -6em; } or instead of position and margin, use a grid span to span those extra rows that are getting pushed down. .imgshieldcol { display: grid; align-items: center; justify-content: space-evenly; grid-row: 1/5; grid-column-start: 1; }

Ah that's a big step forward in sorting out the layout, thanks&nbsp; vÍnce&nbsp; , the second approach did just the trick. or instead of position and margin,&nbsp; use a grid span to span those extra rows that are getting pushed down. .imgshieldcol { display: grid; align-items: center; justify-content: space-evenly; grid-row: 1/5; grid-column-start: 1; } Now I just have to work out how to make the shield image size responsive to the size of its grid container.

You can try making your image a background-image with size cover or contain with no-repeat..?&nbsp; I can never remember. lol&nbsp; Just experiment. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/background-size</a>

so, the issue that is causing the sizing issue is that you are using position:absolute/relative.&nbsp;Absolute is going to make the size separate from the grid without some additional code. Instead of doing that additional code, you can just use the features of grid. That CSS looks like: /* there was a typo here such that there wasn't an opening curly brace for the character styling. This caused your first .afattributes styling to be ignored. */ .ui-dialog .tab-content .charsheet .character{ grid-template-columns: 29% 34% 36%; align-items: stretch; justify-items: stretch; justify-content: stretch; align-content: stretch; grid-template-areas: "common common common" "primaryattributes afattributes finalcombatattributes" "atkdefattributes hpattributes finalcombatattributes" "evaattribute hpattributes finalcombatattributes" "mamdattributes mpattributes classcombatabilities" "steperattributes mpattributes classcombatabilities" "gapfillimg mpattributes classcombatabilities"; } /* Grid layout for attack/defense attributes with image shields */ .ui-dialog .tab-content .charsheet .afattributes { grid-area: afattributes; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; display: grid; border-style: double; border-width: 6px; grid-template-areas: "afheader afheader afheader" "imgshieldcol aftype aftypeinput" "imgshieldcol afname afinput" "shieldhidden shieldhidden shieldhidden"; } /* you had duplicated the afattributes styling */ /* Grid layout for attack/defense attributes with image shields .ui-dialog .tab-content .charsheet .afattributes { grid-area: afattributes; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; display: grid; border-style: double; border-width: 6px; grid-template-areas: "afheader afheader afheader" "aftype aftypeinput aftypeinput" "afname afinput imgshieldcol" "shieldhidden shieldhidden shieldhidden"; } */ /* Grid areas for attack/defense attributes */ .ui-dialog .tab-content .charsheet .afheader { grid-area: afheader; } .ui-dialog .tab-content .charsheet .aftype { grid-area: aftype; } .ui-dialog .tab-content .charsheet .aftypeinput { grid-area: aftypeinput; } .ui-dialog .tab-content .charsheet .afname { grid-area: afname; } .ui-dialog .tab-content .charsheet .afinput { grid-area: afinput; } .ui-dialog .tab-content .charsheet .shieldhidden { display: none; text-align: center; grid-area: shieldhidden; grid-template-areas: "shielddie shieldbutton"; } /* Grid areas for shield attributes */ .ui-dialog .tab-content .charsheet .shielddie { grid-area: shielddie; } .ui-dialog .tab-content .charsheet .shieldbutton { grid-area: shieldbutton; } /* Toggle display of shield-related elements based on shield-toggle input */ input.shield-toggle[value="1"] ~ div.shieldhidden { display: grid; } /* Ensure the image container fits within its grid area */ .ui-dialog .tab-content .charsheet .imgshieldcol { display: grid; position: relative; /* assign the imgshieldcol to the appropriate grid-area */ grid-area: imgshieldcol; } .ui-dialog .tab-content .charsheet .checkbox-container { display: grid; /* define an area where we want all content to go */ grid-template-areas: 'content'; cursor: pointer; } .ui-dialog .tab-content .charsheet .checkbox-container &gt; *{ /* place all direct children of the checkbox container in the content area */ grid-area: content; } /* Hide the default checkbox */ .ui-dialog .tab-content .charsheet .checkbox-input { /* note that this bit of code actually doesn't have anything to do with whether the checkbox responds to clicks or not */ /* cursor: pointer; Ensure the checkbox still responds to clicks */ /* since the checkbox is in a label, we can just set it to display:none */ display: none; } /* Style the image */ .ui-dialog .tab-content .charsheet .checkbox-image { /* display: grid; No need to give this a display of grid. It doesn't have any children, so nothing to put in a grid. */ background: url('<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon%20Warriors/DW_Shieldnobg.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon%20Warriors/DW_Shieldnobg.png</a>') no-repeat center center; background-size: contain; /* Ensure the image scales correctly */ } /* Style the text overlay */ .ui-dialog .tab-content .charsheet .checkbox-text { /* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ place-self: center; /* this line replaces the four above it */ color: black; font-size: 24px; font-weight: bold; } /* Show text when checkbox is checked */ .ui-dialog .tab-content .charsheet .checkbox-input:not(:checked) ~ .checkbox-text { display: none; /* reverse the text display logic so that you don't have to redefine it's display when it should display. Also, we simplify the selectors so that we aren't needlessly complex. */ } Note that I added some prepends to the css declarations to ensure that we override the Roll20 styling. I highly recommend putting .ui-dialog .tab-content .charsheet &nbsp;in front of all of your styling for your character sheet itself. The code above with your original html (added "test Text" to the contents of the checkbox-text span)&nbsp; produces this layout: &nbsp; Additionally, depending on what the checkbox-text element is supposed to display, you might actually be able to do this using just a checkbox without the label.

Scott C. &nbsp;Thanks so much man, that really tidies things up. The first couple of things (missing bracket and duped section) were copy/paste errors porting sample code to here, but the other fixes now have the checkbox/shield working on click and resizing as it should. The text overlay says 'Equipped' when the box is checked (somehow deleted that bit of text, restored now). Only problem is now the " shieldhidden" section is not responding to the checkbox anymore, is the checkboxes value somehow isolated to within the container?

Yes, you'll need a duplicate of the checkbox outside of the container. Alternatively, you could use the just a checkbox method and have it control the display of the text and the shield hidden stuff.

Okay, so count me interested in the just a checkbox method. What do I need to do for that to happen? In going down this rabbit-warren I was under the impression that the approach above was just about the only way to have a 'customised' checkbox.

You can style checkboxes as if they were divs by applying appearance: none to the checkbox, then you can give it a background image, border, etc just like any other element.