CSS, Grid, Roll20, and other Evil Trinities

Using CSS grids , which were helpfully pointed out by Jakob here , I am trying to make one "cell" cover two blocks.  This would be the 62 and 63 blocks.  I have yet to get it to work.   In the character sheet editor pane, gird commands show up as white letters; does this mean this coding does is not fully part of Roll20 yet?  And if it is, what am I doing wrong? <!--Next Line--> <div class="grid_item">Total</div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_willpower" value='0' readonly /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_initiative" value='0' readonly /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_detect" value='@{npc_detect_base} + @{npc_detect_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_sneak" value='@{npc_sneak_base} + @{npc_sneak_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_movement_feet" value="(@{npc_movement})*6" disabled="true" />feet</div> <div class="grid_item"></div> <div class="grid_item"></div> Css sheet-grid_60 { display: grid; grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px; grid-column-gap: 5px; grid-row-gap: 5px; grid-template-areas: '. . . . . myArea myArea'; } .sheet-grid_item { text-align: center; padding: 2px; height: 24px; } .sheet-grid_item_62 { grid-area: myArea; }

Heh, I actually prefer naming my columns/rows rather than using grid-template-areas, but I believe that you have to define a row and column for the template-areas to work. So this: sheet-grid_60 { display: grid; grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px;     grid-template-rows: 70px;/*Just put a random value in here*/ grid-column-gap: 5px; grid-row-gap: 5px; grid-template-areas: '. . . . . myArea myArea'; } .sheet-grid_item { text-align: center; padding: 2px; height: 24px; } .sheet-grid_item_62 { grid-area: myArea; Also, look at embracing the ease of dynamic design with grid by replacing all your 70px with 1fr. And as a note, here's how I'd do this by naming the rows/columns: sheet-grid_60 { display: grid; grid-template-columns: 70px 70px 70px 70px 70px 70px [myArea-start] 70px 70px [myArea-end];      grid-template-rows:[myArea-start] 70px [myArea-end]; grid-column-gap: 5px; grid-row-gap: 5px; } .sheet-grid_item { text-align: center; padding: 2px; height: 24px; } .sheet-grid_item_62 { grid-area: myArea; And, as I finished writing this, I realized from your description that it looks like you are creating a tablesque organization, why not do the whole thing in grid rather than a div for each row? EDIT: Also, instead of text-align:center,  look at using align-self/justify-self:center.

How does one make "the whole thing a grid rather than a div for each one?" When I add in your code, I get this: Now, I really want this, but with the word feet inline with the last box:

...apparently, adding more than one image in a post is not a thing I can do.  So here is the other picture

Ah, I see what you are going for. Could you share the html and layout related css for that entire section?

Scott C. said: Ah, I see what you are going for. Could you share the html and layout related css for that entire section? Gah. <div class="grid_70"> <div class="grid_item"></div> <div class="grid_item"><button type='roll' class="sheet-btn" value='/em @{npc_name} rolls [[2d6 +@{npc_spd}]] for Speed'>Spd</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" value='/em @{npc_name} rolls [[2d6 +@{npc_str}]] for Strength'>Str</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" value='/em @{npc_name} rolls [[2d6 +@{npc_mat}]] for Melee Attack '>MAT</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" value='/em @{npc_name} rolls [[2d6 +@{npc_rat}]] for Ranged Attack'>RAT</button></div> <div class="grid_item"><h5>DEF</h5></div> <div class="grid_item"><h5>ARM</h5></div> <div class="grid_item">Shield</div> <!--Next Line--> <div class="grid_item">Base</div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_spd_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_str_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_mat_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_rat_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_def_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_arm_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_shield_base"/></div> <!--Next Line--> <div class="grid_item">Mod</div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_spd_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_str_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_mat_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_rat_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_def_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_arm_mod"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_shield_mod"/></div> <!--Next Line--> <div class="grid_item">Total</div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_spd" value='0' readonly/></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_str" value='@{npc_str_base} + @{npc_str_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_mat" value='@{npc_mat_base} + @{npc_mat_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_rat" value='@{npc_rat_base} + @{npc_rat_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_def" value='0' readonly/></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_arm" value='0' /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_shield" value='0' /></div> <!--Next Line--> <div class="grid_item"></div> <div class="grid_item"><button type='roll' class="sheet-btn" class="sheet-skill_button" name="npc_willpower_roll" value='/em @{npc_name} rolls [[2d6 + @{npc_willpower}]] for willpower'>Willpower</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" class="sheet-skill_button" style="width:70px;" name="npc_initiative_roll" value='/em @{npc_name} rolls [[2d6 + @{npc_initiative} &{tracker}]] for initiative'>Initiative</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" class="sheet-skill_button" style="width:45px;" name="npc_detect_roll" value='/em @{npc_name} rolls [[2d6 + @{npc_detect}]] for detect'>Detect</button></div> <div class="grid_item"><button type='roll' class="sheet-btn" class="sheet-skill_button" style="width:45px;" name="npc_sneak_roll" value='/em @{npc_name} rolls [[2d6 + @{npc_sneak}]] for sneak'>Sneak</button></div> <div class="grid_item"><h5>Movement</h5></div> <div class="grid_item"><h5>Vitality</h5></div> <div class="grid_item"></div> <!--Next Line--> <div class="grid_item">Base</div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_willpower_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_initiative_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_detect_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_sneak_base"/></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_movement_mod" /></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_vitality"/></div> <div class="grid_item"></div> <!--Next Line--> <div class="grid_item">Modifier</div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_willpower_mod" /></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_initiative_mod" /></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_detect_mod" /></div> <div class="grid_item"><input class="sheet-input-center-aligned" type="number" value="0" name="attr_npc_sneak_mod" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_movement" value='' readonly /></div> <div class="grid_item"></div> <div class="grid_item"></div> <!--Next Line--> <div class="grid_item">Total</div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_willpower" value='0' readonly /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_initiative" value='0' readonly /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_detect" value='@{npc_detect_base} + @{npc_detect_mod}' disabled="true" /></div> <div class="grid_item"><input type="number" class="sheet-input-center-aligned" name="attr_npc_sneak" value='@{npc_sneak_base} + @{npc_sneak_mod}' disabled="true" /></div> <div class="grid_item grid_item_a"><input type="number" class="sheet-input-center-aligned" name="attr_npc_movement_feet" value="(@{npc_movement})*6" disabled="true" />feet</div> <div class="grid_item"></div> <div class="grid_item"></div> <div class="doublerow"> <div class="item 700"><textarea class="sheet-textarea1" wrap="soft" value="" name="attr_npc_text" placeholder="NPC Description" /></textarea></div> </div> </div> And the css .sheet-grid_70 { display: grid; grid-template-columns: 70px 70px 70px 70px 70px 70px 70px 70px; grid-template-rows: 26px;/*Just put a random value in here*/ grid-column-gap: 5px; grid-row-gap: 5px; grid-template-areas: '. . . . . myArea myArea .'; } .sheet-grid_item { padding: 2px; height: 24px; justify-self: center; } /* Rows and Items */ .charsheet .sheet-row { height: 26px; margin: 2px 0px 2px; } .charsheet .sheet-doublerow { height: 48px; margin: 2px 0px 2px; } .charsheet .sheet-item { display: inline-block; width: 100%; height: 28px; vertical-align: middle; margin: 0 -2px; text-align: left; padding: 3px 2px; } .charsheet .sheet-item.sheet-10 { width:10px; } .charsheet .sheet-item.sheet-700 { width: 700px; } .sheet-input-center-aligned { background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border:none; box-shadow:none; font-weight: bold; color: black; } .sheet-input-center-aligned[type="number"] { text-align:center; }textarea { height: 36px; margin: 5px 0px 0px 0px; resize:vertical; overflow-y:hidden; } textarea.sheet-textarea1 { overflow-y: scroll; border: 2px solid red; resize:none; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ border:none; box-shadow:none; font-weight: bold; color: black; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } Button css button[type="roll"].sheet-btn:before { content: ""!important; display: none; } button[type="roll"].sheet-btn { width: 100%; height:24px; vertical-align: middle; display: inline-block; margin: 0; font-weight: 700; text-align: left; vertical-align: middle; cursor: pointer; background-image: none; border-radius:5px; background-color: transparent; border: 2px outset gray; border-style: outset; padding: 2px; padding-left:2px; font-size: 1em; color: white; text-shadow: 0px 0px 0.2em #6C3306; } button[type="roll"].sheet-btn:hover { border: 2px inset gray; padding-left:4px; padding-top:4px; padding-right:0px; padding-bottom:0px; } button[type="roll"].sheet-btn:active { border: 2px solid black; } button[type="roll"].sheet-btn label, button[type="roll"].sheet-btn input { height:100%; line-height: 24px; font-size: 1em; vertical-align: middle; text-align:center; width: 100%; cursor: pointer; background: none; box-shadow: none; transition: none; border-radius: none; border:none; font-weight:700; }