Can't get them into their columns

Hello, I have a custom page that I am making.  I am using grid, and have it in 3 "boxes". I have in the first "column" the attributes and Roll Buttons.  But they are stacked when the button and attribute should be horizontal.  I'm losing my mind. Here's the code. HTML < input type =" hidden " class =" sheet-tabstoggle " name =" attr_sheetTab "   value =" character "  /> < div >     < button type =" action " name =" act_character " > Character </ button >             < button type =" action " name =" act_sheet-equipped " > Equipped </ button >     < button type =" action " name =" act_inventory " > Inventory </ button >     < button type =" action " name =" act_edit-sheet " > Edit Sheet </ button > </ div > < div class =" sheet-character "></ div > < input type =" text " name =" @{character_name} " value =" Character Name ">     < div class =" sheet-grid-section ">                 < div class =" sheet-core-stats sheet-block ">                 < h3 > Core Stats </ h3 >         < h3 disabled ></ h3 >             < span > STR </ span >             < button class =" sheet-button-roll "   type =" roll " value =" &{template:default} {{name=@{character_name} rolls Strength}} {{roll=[[1d20+@{strength}]]}} "/>             < span > DEX </ span >             < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Dexterity}} {{roll=[[1d20+@{dexterity}]]}} " />             < span > CON </ span >             < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Strength}} {{roll=[[1d20+@{constitution}]]}} "/>             < span > INT </ span >             < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Intelligence}} {{roll=[[1d20+@{intelligence}]]}} "/>             < span > WIS </ span >             < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Wisdom}} {{roll=[[1d20+@{wisdom}]]}} "/>                         < span > CHA </ span >             < button class =" sheet-button-roll " type =" roll " value =" &{template:default} {{name=@{character_name} rolls Charisma}} {{roll=[[1d20+@{charisma}]]}} "/>                         </ div >     </ div > </ div > CSS /*Configure the tab buttons*/ . charsheet . sheet-character , . charsheet . sheet-equipped , . charsheet . sheet-inventory , . charsheet . edit-sheet {     display : none ; } /* show the selected tab */ . charsheet . sheet-tabstoggle [ value = " character " ] ~ div . sheet-character , . charsheet . sheet-tabstoggle [ value = " sheet-equipped " ] ~ div . sheet-equipped , . charsheet . sheet-tabstoggle [ value = " inventory " ] ~ div . sheet-inventory , . charsheet . sheet-tabstoggle [ value = " edit-sheet " ] ~ div . edit-sheet {     display : block ; } . charsheet div . sheet-block {     display : grid ;         padding : 5px ;     border : 3px solid black ; } . charsheet . sheet-grid-section {     display : grid ;     grid-template-columns : 110px 330px 160px ;     grid-template-rows : 450px 150px 450px ;     grid-template-areas : " core-stats defense skills "                           " core-stats defense skills "     grid-gap: 5px ; } . charsheet div . core-stats { grid-area : core-stats ;   }   . charsheet div . defense {     grid-area : defense ;   }   . charsheet div . skills {     grid-area : skills ;     } . charsheet div . health { display : grid ;   grid-template-columns : 52px 52px 52px 52px 52px 52px ; grid-template-rows : 2em 2em   ;         row-gap : 5px ; column-gap : 5px ; } div . core-edit {   display : grid ;     grid-template-columns :   5em 5em 5em 5em 5em 5em 5em 5em 5em 5em ;   row-gap : 1px ;   column-gap : 1px ; } . sheet-button-roll {     background-color : rgb ( red , green , blue )   ;     font-family : dicefontd7 ;     content : " l " ;     color : # 500000 ;     width : 2em ; }

I miss <tr> & <td>

It looks like you don't have the grid-template-columns line that tells the browser how to arrange the columns. Something like .charsheet div.sheet-core-stats { &nbsp; &nbsp; grid-template-columns : 50% 50% ; } You'll also need to handle the row height, and make the heading span over two columns. You can do that like this: .charsheet div.sheet-core-stats { &nbsp; &nbsp; grid-template-columns : 50% 50% ; &nbsp; &nbsp; grid-auto-rows : 30px ; } .charsheet div.sheet-core-stats h3 { &nbsp; &nbsp; grid-column : 1 / -1 ; } You have an empty disabled h3, which i expect you'll want to remove. I suspect that is there to create a second column, but with grid-column: 1 / -1 you dont need it. You might want to change any of the specific numbers listed there. See more about grid here: <a href="https://cybersphere.me/css-grid/" rel="nofollow">https://cybersphere.me/css-grid/</a>

Thanks GiGs - that worked!

You're welcome :)