grid sheet not being honored

So I have a grid section that defines x number of columns. When I define it in html/css the columns are not being honored. Here's the CSS for the section .charsheet .sheet-edit-character-grid-section{     display: grid;     grid-gap: 5px;     column-gap: 5px;     grid-template-columns: 200px 200px 200px 200px ;     grid-template-rows: auto;     grid-template-areas:         "edit-health edit-health edit-defense edit-defense"     "edit-core-stats edit-core-stats edit-core-stats edit-core-stats" } .charsheet div.sheet-edit-health {       grid-area: edit-health;   grid-template-columns: 75px 1fr 1fr 1fr 1fr;     grid-template-rows: auto;   grid-auto-rows: 28px;   grid-gap: 5px;     text-align: center; } .charsheet div.sheet-edit-health h3 {     grid-area: edit-health;   grid-column: 10 / -10;   text-align: center;   grid-row: 1;   } .charsheet div.sheet-edit-health b {     color:#278bce;   margin: auto;   text-align: center; } .charsheet div.sheet-edit-defense {       grid-area: edit-defense;   grid-template-columns: 100px 52px 52px 52px 52px 52px;     grid-auto-rows: 28px;   grid-gap: 5px;     text-align: center;   } .charsheet div.sheet-edit-defense b {     color:#278bce;   margin: auto;   text-align: center; } .charsheet div.sheet-edit-defense h3 {     grid-area: edit-defense;   grid-column: 10 / -10;   text-align: center;   grid-row: 1; }   Here's the HTML <div class="sheet-editcharacter">     <b class="sheet-subheading sheet-blue-color sheet-center" style="text-align:center;">edit the core of your character here</b>     <!-- START OF EDIT SHEET -->     <div class="sheet-edit-character-grid-section sheet-block">         <div class="sheet-edit-health">                     <h3 class="sheet-gold-color">Health</h3>                       <input class="sheet-inputfield sheet-blue-color" type="text" value="Misc Mods" style="width: 50px;"disabled/>             <input class="sheet-inputfield sheet-blue-color" type="text" value="Cyb." style="width: 50px;"disabled/>             <input class="sheet-inputfield sheet-blue-color" type="text" value="Gen." style="width: 50px;"disabled/>             <input class="sheet-inputfield sheet-blue-color" type="text" value="Art." style="width: 50px;"disabled/>             <input class="sheet-inputfield sheet-blue-color" type="text" value="Misc" style="width: 50px;"disabled/>             <input class="sheet-inputfield sheet-blue-color" type="text" value="Quirk" style="width: 50px;"disabled/>             <span disabled></span>             <b>HitPoints</b>             <span class="sheet-red-color sheet-center" name="attr_hp_total" value="0">000</span>             <input class="sheet-inputfield-health sheet-center" name="attr_hp_cyb_misc" value="0" />             <input class="sheet-inputfield-health sheet-center" name="attr_hp_gen_misc" value="0" />             <input class="sheet-inputfield-health sheet-center" name="attr_hp_cyb_misc" value="0" />             <input class="sheet-inputfield-health sheet-center" name="attr_hp_cyb_misc" value="0" />             <b>P+</b>             <span class="sheet-red-color sheet-center" name="attr_natural_pen_plus" value="@{constitution}/10" />             <b>Dmg R.</b>             <span class="sheet-red-color sheet-center" name="attr_constitution" value="@{constitution}" />             <b>Regen</b>             <span class="sheet-red-color sheet-center" name="attr_constitution" value="@{constitution}" />         </div>                       <div class="sheet-edit-defense">                     <h3 class="sheet-gold-color">Defense</h3>                                 </div>           </div>         I don't get it... sometimes span honors the columns css, sometimes it doesn't. sometimes <b> does, and sometimes <input> and sometimes it doesn't. Ugh. It's supposed to be 6 Columns in the first half of the grid, 25% & 25% = 50% = 1/2 of the top section, defined in .charsheet .sheet-editcharacter-grid-section  Sometimes span gets squished into one column, sometimes it honors each.

They just won't honor the grid columns

Are you trying to get the h3's inside the edit-  containers to go in the grid columns? That won't work. You've set  sheet-edit-character-grid-section  as your grid container (e.g. display:grid; ). The h3's aren't direct children of the  sheet-edit-character-grid-section , so they have no access to the grid setup there. There's a few options: define the grid you want for the layout in each subsection Set each subsection to display:contents; . This will allow the contents of the edit-health  and edit-defense  sections to access the grid of the master container.

Scott C. said: Are you trying to get the h3's inside the edit-  containers to go in the grid columns? That won't work. You've set  sheet-edit-character-grid-section  as your grid container (e.g. display:grid; ). The h3's aren't direct children of the  sheet-edit-character-grid-section , so they have no access to the grid setup there. There's a few options: define the grid you want for the layout in each subsection Set each subsection to display:contents; . This will allow the contents of the edit-health  and edit-defense  sections to access the grid of the master container.