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;
}