Okay, so I have this repeating field div that won't go where the CSS says to go. Instead it's all over the place. And I notice it responds better, or worse, when I change it to flexbox, etc. HTML
<div class="sheet-editpsionics">
<!-- <h3 style="grid-column: 1 / -1; text-align:center; padding-top: 10px;">PSIONICS EDIT PAGE</h3> -->
<!-- PAGE HEADER BELOW BUTTONS -->
<!-- Add your HTML HERE -->
<div class="sheet-edit-psionics-grid-section sheet-block">
<div class="sheet-edit-life-energy " style="text-align: center;">
<h2 style="grid-column: 1 / -1; padding-top: 5px;">LIFE CORD</h2>
<span class="sheet-blue-color" >Life Energy</span class="sheet-blue-color" />
<input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Life Energy" type="number" name="attr_life_energy" value="attr_life_energy" style="width:5em;" />
<span class="sheet-red-color">/</span>
<input class="sheet-inputfieldlc sheet-blue-color" title="Your Maximum Life Energy" type="number" name="attr_life_energy_full" value="" style="width:5em;" />
<input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>
<span class="sheet-blue-color" >RE</span>
<input class="sheet-inputfieldlc sheet-blue-color" title="Your Current Raw Energy Output" type="number" name="attr_raw_energy" value="floor(@{life_energy} / 100)" disabled />
<input class="sheet-inputfieldlc sheet-blue-color" title="Your Sphere of Influence" type="number" name="attr_sphere_of_influence" value="floor((@{life_energy} / 100)+3)" disabled />
<span class="sheet-blue-color" >Sphere</span>
<input class="sheet-inputfield52" style="background-color: #282828; border:#282828" disabled>
<span class="sheet-blue-color" >Regen %</span class="sheet-blue-color" />
<input class="sheet-inputfieldlc sheet-blue-color" title="Percentage your LC regenerates (of max)" type="number" name="attr_life_energy_regen_percent" value="10" />
<input class="sheet-inputfieldlc sheet-blue-color" title="Actual Life Energy per day" type="number" name="attr_life_energy_regenerated" value="(@{life_energy_full}/100)*(@{life_energy_regen_percent})" disabled />
<span class="sheet-blue-color" >/day</span class="sheet-blue-color" />
</div>
</div>
<div class="sheet-edit-psionics-grid-section">
<div class="edit-psi-buttons sheet-block">
<button class="sheet-button-roll2" type="action" name="act_body-discipline" >Body Disc</button>
<button class="sheet-button-roll2" type="action" name="act_causation" >Causation</button>
<button class="sheet-button-roll2" type="action" name="act_clairvoyance" >Clairvoyance</button>
<button class="sheet-button-roll2" type="action" name="act_deflection" >Deflection</button>
<button class="sheet-button-roll2" type="action" name="act_domination" >Domination</button>
<button class="sheet-button-roll2" type="action" name="act_energy-communion" >E.Comm</button>
<button class="sheet-button-roll2" type="action" name="act_molecular-alteration" >Molecular</button>
<button class="sheet-button-roll2" type="action" name="act_pyrokinesis" >Pyrokinesis</button>
<button class="sheet-button-roll2" type="action" name="act_subatomic-alteration" >Subatomic</button>
<button class="sheet-button-roll2" type="action" name="act_telekinesis" >Telekinesis</button>
<button class="sheet-button-roll2" type="action" name="act_anti-psionics" >Anti Psi</button>
</div>
</div>
<div class="sheet-edit-psionics-grid-section">
<input type="hidden" class="sheet-tabstoggle1" name="attr_psiTab" value="" />
<div class="sheet-body-discipline sheet-block">
<h2> Body Discipline </h2>
<!-- <div class="sheet-center" style="text-align: center; display: grid; column-gap: 4px; grid-template-columns: 75px 75px 75px 75px 75px 75px 75px 75px 75px 45px 45px 60px 60px; grid-auto-rows:28px;"> -->
<!-- 13 Columns -->
<span class="sheet-blue-color sheet-center" style="font-size: smaller; text-align: right;">Effective Level</span>
<input class="sheet-inputfield52 sheet-center sheet-red-color" name="attr_psi_body_discipline_effective_lvl" value="attr_psi_body_discipline_effective_lvl" title="This is your effective level including Art, Misc, & Quirk." readonly/>
<span class="sheet-blue-color sheet-center" style="font-size: small;">BD Level</span>
<input class="sheet-inputfield52 sheet-center sheet-red-color" name="attr_psi_body_discipline_lvl" value="@{psi_body_discipline_lvl}" title="This is your level without Art or Misc." readonly/>
<span class="sheet-blue-color sheet-center" style="font-size: small;">BD Points</span>
<input class="sheet-inputfield52 sheet-center sheet-blue-color" type="number" name="attr_psi_body_discipline_points">
<span class="sheet-blue-color sheet-center" style="font-size: smaller; text-align: right;">Body Disc. Progression</span>
<!-- <input class="sheet-inputfield52 sheet-blue-color sheet-center" name="attr_body_discipline_points" type="number"> -->
<select class="skill-progression sheet-dorpdown sheet-blue-color sheet-inputfield" type="text" name="attr_skillprogression" style="width: 80px;">
<option style="color:#278bce;background:#000000;" selected>1,2,3...</option>
<option style="color:#278bce;background:#000000;">4,5,6,7</option>
<option style="color:#278bce;background:#000000;">3,4,5,6</option>
<option style="color:#278bce;background:#000000;">2,3,4,5</option>
<option style="color:#278bce;background:#000000;">1,2,3,4</option>
<option style="color:#278bce;background:#000000;">3,3,3,3</option>
<option style="color:#278bce;background:#000000;">5,5,5,5</option>
<option style="color:#278bce;background:#000000;">10,10,10,10</option>
</select>
<button class="sheet-button-roll" type="roll" value="&{template:default} {{name=@{character_name} Rolls Focus Skill}} {{Focus Roll=[[1d20+@{focus}]]}} {{?{Roll|Public, |To DM,/w gm} Rolling ?{Number|1}?{Type|D4|D6|D8|D10|D12|D20|D100} + ?{Modifier|0}: [[ ?{Number}?{Type}+?{Modifier} ]]}}" style="font-size:smaller;">Focus</button>
<span disabled></span>
<span disabled></span>
<!-- Boosting Headers -->
<span class="sheet-center sheet-gold-color" style="padding-left:0px;">Artifact</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px;">Type</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px;">Quirk</span>
<span class="sheet-center sheet-red-color" style="padding-left:0px;">Boost RE</span>
<button class="sheet-button-roll sheet-red-color" type="roll" value="&{template:default} {{name=@{character_name} Boosts Strength with Body Discipline}} {{Boost Strength=[[floor(@{psi_body_discipline_boost_re}/@{psi_body_discipline_boost_str_cost})]]}}" style="font-size:smaller; color: red;" title="Your Strength Boost">STR</button>
<button class="sheet-button-roll sheet-red-color" type="roll" value="&{template:default} {{name=@{character_name} Boosts Dexterity with Body Discipline}} {{Boost Dexterity=[[floor(@{psi_body_discipline_boost_re}/@{psi_body_discipline_boost_dex_cost})]]}}" style="font-size:smaller; color: red;" title="Your Strength Boost">DEX</button>
<button class="sheet-button-roll sheet-red-color" type="roll" value="&{template:default} {{name=@{character_name} Boosts Constitution with Body Discipline}} {{Boost Constitution=[[floor(@{psi_body_discipline_boost_re}/@{psi_body_discipline_boost_con_cost})]]}}" style="font-size:smaller; color: red;" title="Your Strength Boost">CON</button>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color: silver;">Adapt</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color: silver;">STR</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color: silver;">DEX</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color: silver;">CON</span>
<!-- TOTALS -->
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_artifact" value="" type="number" />
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_artifact_type" type="text" title="What kind of item, belt, broche, sword, etc."/>
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_quirk" value="" type="number" />
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_body_discipline_boost_re" type="text" title="This is how much RE you are investing into your Boost."/>
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_body_discipline_boost_str_cost" value="8" type="number" title="Every 10th level of Body Discipline decreases this cost by 1. Base RE Cost for Strength is 8." style="width: 60px; color: red;"/>
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_body_discipline_boost_dex_cost" value="16" type="number" title="Every 10th level of Body Discipline decreases this cost by 1. Base RE Cost for Dexterity is 16." style="width: 60px; color: red;" />
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_body_discipline_boost_con_cost" value="12" type="number" title="Every 10th level of Body Discipline decreases this cost by 1. Base RE Cost for Constitution is 12." style="width: 60px; color: red;"/>
<span disabled></span>
<input class="sheet-inputfield sheet-center sheet-red-color" style="width:60px; color: silver;" name="attr_psi_body_discipline_adaption_str_bonus" title="Every level gain a +1 to either Str or Con." value="" type="number" />
<input class="sheet-inputfield sheet-center sheet-red-color" style="width:60px; color: silver;" name="attr_psi_body_discipline_adaption_dex_bonus" title="Every 4th level you may select +1 Dexterity in place of Str or Con." value="" type="number" />
<input class="sheet-inputfield sheet-center sheet-red-color" style="width:60px; color: silver;" name="attr_psi_body_discipline_adaption_con_bonus" title="Every level you may gain a +1 to either Str or Con." value="" type="number" />
<!-- Healing Headers -->
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: x-small;text-align: center; color:rgb(14, 237, 14)">Heal & Regen</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color:rgb(14, 237, 14)">Heal Cost</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color:rgb(14, 237, 14)">RE Used</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color:rgb(14, 237, 14); font-size: smaller;">Heal lvl <span class="sheet-center sheet-blue-color" name="attr_psi_body_discipline_heal_lvl" value="attr_psi_body_discipline_heal_lvl" style="font-weight: bold;" title="This tells you what level your Heal is on the Dice Progression Chart."></span></span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color:rgb(14, 237, 14)">Quirk</span>
<span class="sheet-center sheet-gold-color" style="padding-left:0px; color: lightseagreen;">Regen.</span>
<!-- Natural Armor Headers-->
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: smaller; text-align: center; color:pink">Nat Armor</span>
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: smaller; text-align: center; color:pink">P+</span>
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: smaller; text-align: center; color:pink">RE Cost</span>
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: smaller; text-align: center; color:pink">RE Used</span>
<span class="sheet-center sheet-red-color sheet-font-xsmall" style="font-size: smaller; text-align: center; color:pink">Hours</span>
<!-- TOTALS -->
<button class="sheet-button-roll" type="roll" value="&{template:default} {{name=@{character_name} Rolls Body Discipline Heal}} {{Heal Roll=[[@{psi_body_discipline_heal_dice}*floor(@{psi_body_discipline_heal_re_used}/@{psi_body_discipline_heal_cost})]]}}" style="font-size:smaller;" title="Rolls your Heal Dice + Constituion ">Heal</button>
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_heal_cost" value="attr_psi_body_discipline_heal_cost" type="number" title="Base cost for Heal is 10RE." readonly/>
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_heal_re_used" value="0" type="number" title="Every 10 additional RE burned adds a multiplier." />
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_heal_dice" type="text" title="Dice rolled, determined from the Dice Progression Chart."/>
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px;" name="attr_psi_body_discipline_heal_quirk" value="0" type="number" title="Quirk Heal Bonus. Decreases RE Cost."/>
<input class="sheet-inputfield sheet-center sheet-blue-color" style="width:75px; color: lightseagreen; font-weight: bold;" name="attr_psi_body_discipline_regen" value="" type="number" title="Body Regeneration" readonly/>
<!-- Natural Armor Totals -->
<input class="sheet-inputfield sheet-center sheet-pink-color" name="attr_psi_body_discipline_nat_armor_hp_max" type="number" style="width: 75px; text-align: center; color:pink" readonly/>
<input class="sheet-inputfield sheet-center sheet-pink-color" name="attr_psi_body_discipline_nat_armor_p_plus" value="floor(@{psi_body_discipline_effective_lvl}/16)" type="number" style="text-align: center; color:pink" readonly/>
<input class="sheet-inputfield sheet-center sheet-pink-color" name="attr_psi_body_discipline_nat_armor_re_cost" type="number" style="width: 60px; text-align: center; color:pink"/>
<input class="sheet-inputfield sheet-center sheet-pink-color" name="attr_psi_body_discipline_nat_armor_re_used" type="number" style="width: 60px; text-align: center; color:pink"/>
<input class="sheet-inputfield sheet-center sheet-pink-color" name="attr_psi_body_discipline_nat_armor_med_time" value="attr_psi_body_discipline_nat_armor_med_time" type="text" style="width: 60px; text-align: center; font-size: x-small; color:pink" readonly/>
</div>
<div class="sheet-edit-psionics-grid-section">
<div class="sheet-body-discipline">
<div class="sheet-repeating-skills">
<h2> Body Discipline Sub-Skills </h2>
<fieldset class="repeating_bdskills">
<button class="sheet-button-roll" type="roll" value="&{template:default} {{Name=@{psibdskillname}}} {{Dice / DR=[[@{psibdskillrolldata}]]}} {{Description=@{psibdskilldescription}}} " style="font-size:smaller;"">Roll</button>
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psibdskillname" type="text" value="Sub-Skill Name" style="width: 100px;"/>
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psibdskillrolldata" type="text" value="Dice or Number for DR, etc." style="width: 100px;"/>
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psibdskilldescription" type="text" value="A Description" style="width: 515px;"/>
</fieldset>
</div>
</div>
</div>
<div class="sheet-causation">
<div class="sheet-edit-psionics-grid-section edit-psi-causation sheet-center">
<span class="sheet-gold-color" style="grid-column: 1 / 7; text-align: center;"> Causation </span>
<div class="sheet-center edit-psi-causation" >
<span class="sheet-blue-color sheet-center">Psi Level</span>
<span class="sheet-yellow-color" disabled>CALC POINTS FROM Prog</span>
<span class="sheet-blue-color sheet-center">Points</span>
<input class="sheet-inputfield52 sheet-blue-color sheet-center" name="attr_causation_points" type="number">
<span class="sheet-blue-color" disabled>Prog</span>
<select class="skill-progression sheet-dorpdown sheet-blue-color sheet-inputfield" type="text" name="attr_skillprogression" style="width: 75px;">
<option style="color:#278bce;background:#000000;" selected>1,2,3...</option>
<option style="color:#278bce;background:#000000;">4,5,6,7</option>
<option style="color:#278bce;background:#000000;">3,4,5,6</option>
<option style="color:#278bce;background:#000000;">2,3,4,5</option>
<option style="color:#278bce;background:#000000;">1,2,3,4</option>
<option style="color:#278bce;background:#000000;">3,3,3,3</option>
<option style="color:#278bce;background:#000000;">5,5,5,5</option>
<option style="color:#278bce;background:#000000;">5,5,5,5</option>
</select>
<div class="edit-psi edit-repeating-causation-quirks" display="grid" >
<fieldset class="repeating_quirks" >
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_quirk" type="text" value="Quirk Name" style="width: 125px;" />
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_quirkdesc" type="text" value="Quirk Description" style="width: 500px;"/>
</fieldset>
</div>
</div>
</div>
</div>
<div class="sheet-clairvoyance">
<div class="sheet-edit-psionics-grid-section edit-psi-clairvoyance sheet-center">
<span class="sheet-gold-color" style="grid-column: 1 / 10; text-align: center;"> CLAIRVOYANCE </span>
<span class="sheet-blue-color sheet-center">Psi Level</span>
<input class="sheet-inputfield sheet-yellow-color" type="number" name="attr_psi_clairvoyance" value="" />
<span class="sheet-blue-color sheet-center">Points</span>
<input class="sheet-inputfield52 sheet-blue-color sheet-center" name="attr_clairvoyance_points" type="number">
<span class="sheet-blue-color" disabled>Prog</span>
<select class="skill-progression sheet-dorpdown sheet-blue-color sheet-inputfield" type="text" name="attr_skillprogression" style="width: 75px;">
<option style="color:#278bce;background:#000000;" selected>1,2,3...</option>
<option style="color:#278bce;background:#000000;">4,5,6,7</option>
<option style="color:#278bce;background:#000000;">3,4,5,6</option>
<option style="color:#278bce;background:#000000;">2,3,4,5</option>
<option style="color:#278bce;background:#000000;">1,2,3,4</option>
<option style="color:#278bce;background:#000000;">3,3,3,3</option>
<option style="color:#278bce;background:#000000;">5,5,5,5</option>
<option style="color:#278bce;background:#000000;">5,5,5,5</option>
</select>
<span class="sheet-blue-color sheet-center">Aware +</span>
<input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_psi_clairvoyance_awareness_bonus" value="floor(@{psi_clairvoyance}/2)" type="number" disabled/>
<span class="sheet-blue-color sheet-center">HP +</span>
<input class="sheet-inputfield sheet-blue-color sheet-center" name="attr_psi_clairvoyance_awareness_bonus" value="floor(@{psi_clairvoyance}*5)" type="number" disabled/>
<button class="sheet-button-roll" type="roll" value="&{template:default} {{name=@{character_name} Rolls Body Discipline Heal}} {{Heal Roll=[[@{psi_body_discipline_heal_dice}+@{constitution}]]}}" style="font-size:smaller;" title="Rolls your Heal Dice + Constituion ">Heal</button>
<button class="sheet-button-roll" type="roll" value="&{template:default} {{name=@{character_name} Rolls Body Discipline Heal}} {{Focus Roll=[[1d20+@{focus}]]}} {{Focus LE=?{Roll|Public, |To DM,/w gm} ?{Number|1}?{Type|D4|D6|D8|D10|D12|D20|D100} + ?{Modifier|0}: [[ ?{Number}?{Type}+?{Modifier} ]]}}" style="font-size:smaller;" title="Determines LE Burned for Healing. Matched to Dice Chart for DICE field.">Focus</button>
<div class="edit-psi edit-repeating-clairvoyance-quirks" display="grid" >
<fieldset class="repeating_quirks" >
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_clairvoyance_skill_name_1" type="text" value="Quirk Name" style="width: 75px;" />
<input class="sheet-inputfield sheet-center sheet-red-color" name="attr_psi_clairvoyance_skill_name_1_" type="text" value="Quirk Description" style="width: 500px;"/>
</fieldset>
</div>
</div>
</div>
CSS
/* START OF PSIONICS EDIT PAGE */
.charsheet .sheet-edit-psionics-grid-section{
display: grid;
grid-gap: 5px;
grid-template-columns: 827px;
grid-template-areas:
"life-energy life-energy life-energy life-energy"
"psi-buttons psi-buttons psi-buttons psi-buttons"
"edit-psionics edit-psionics edit-psionics edit-psionics"
"psi-sub-skills psi-sub-skills psi-sub-skills psi-sub-skills"
}
div.sheet-edit-life-energy {
display: flexbox;
grid-area: life-energy;
width: 827px;
grid-template-columns: 3.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 28px;
grid-gap: 1em;
font-size: large;
}
div.edit-psi-buttons {
display: grid;
grid-area: psi-buttons;
width: 827px;
grid-gap: 5px;
font-size: large;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 28px;
grid-gap: 5px;
}
div.psionics-buttons h3 {
grid-column: 1 / -1;
text-align: center;
grid-row: 1;
}
div.sheet-body-discipline {
grid-area: edit-psionics;
display: grid;
width: 827px;
grid-template-columns: 75px 75px 75px 75px 75px 75px 75px 75px 60px 60px 60px;
grid-auto-rows: 28px;
grid-gap: 5px;
font-size: medium;
}
div.sheet-repeating-skills{
grid-area: psi-sub-skills;
display: flexbox;
grid-template-columns: 75px 100px 100px 522px;
grid-auto-rows: 28px;
grid-gap: 5px;
}
div.edit-psi-bd h3{
grid-area: edit-psionics;
grid-template-columns: auto;
/* grid-columns: 1 / 4; */
grid-auto-rows: 25px;
grid-gap: 5px;
font-size: large;
text-align: center;
}
div.edit-repeating-causation-quirks{
grid-area: edit-psionics;
grid-template-columns: 100px 500px;
grid-template-rows: 25px;
grid-auto-rows: 25px;
grid-gap: 2px;
}
div.edit-psi-causation {
grid-area: edit-psionics;
grid-template-columns: 7em 3.5em 3.5em 3.5em 3.5em 3.5em 3.5em ;
grid-auto-rows: 25px;
grid-gap: 1em;
font-size: medium;
}
div.edit-psi-clairvoyance {
grid-area: edit-psionics;
grid-template-columns: 75px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 25px;
grid-gap: 1em;
font-size: medium;
}
div.sheet-psionics h3 {
grid-column: 1 / -1;
text-align: center;
grid-row: 1;
}
/* END OF PSIONICS EDIT PAGE */
