CSS and nesting grids

So, I got the bright idea to start trying to make my sheet look a little nicer now that it is on github and functional.  I may regret this...  Originally, the main chunk of character info was a huge grid with a ton of columns and rows.  It was a pain for people to find things in, so I color coded some areas to make it easier to direct people to different fields.  I thought about breaking that up in chunks, putting some on another tab for social/personality info, and keeping the attribute names the same so sheets would continue to work. I took a snippet of my sheet and put it in a new game to make sure I don't have anything interfering somewhere.  I have used a grid within a grid cell for min/max attributes on the sheet.  I thought it would be easy to make a grid for a chunk of the sheet that was essentially just a single row with a few columns that each contained a grid.  I have made 2 subgrids, the first of which has the min/max grids in one column of cells.  The 2 main subgrids refuse to display side by side.  Is there a limit to how many grids can be nested, or am I missing something silly? <div class='middle-grid-containter'> <div class='blue-grid-container'> <h4 class='stat-label'>Stat</h4> <h4 class='stat-label'>Now/Past</h4> <button class='statdice' type="roll" name='roll_iq_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=I.Q. Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{iq}}}" >I.Q.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_iq"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_iq_max"/> </div> <button class='statdice' type="roll" name='roll_me_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Mental Endurance Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{me}}}" >M.E.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_me"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_me_max"/> </div> <button class='statdice' type="roll" name='roll_ma_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Mental Affinity Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{ma}}}" >M.A.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_ma"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_ma_max"/> </div> <button class='statdice' type="roll" name='roll_ps_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Physical Strength Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{ps}}}" >P.S.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_ps"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_ps_max"/> </div> <button class='statdice' type="roll" name='roll_pp_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Physical Prowess Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{pp}}}" >P.P.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_pp"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_pp_max"/> </div> <button class='statdice' type="roll" name='roll_pe_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Physical Endurance Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{pe}}}" >P.E.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_pe"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_pe_max"/> </div> <button class='statdice' type="roll" name='roll_pb_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Physical Beauty Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{pb}}}" >P.B.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_pb"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_pb_max"/> </div> <button class='statdice' type="roll" name='roll_spd_check' value="&{template:custom} {{color=black}} {{title=**@{character_name}**}} {{subtitle=Speed Check}} {{Check=[[1d20cs<1cf>20]]|[[1d100cs<1cf>100]]}} {{Target=@{spd}}}" >Spd.</button> <div class='fraction-grid-container'> <input class='minmax' type=text value='' name="attr_spd"/> <div class='divider'></div> <input class='minmax' type=text value='' name="attr_spd_max"/> </div> </div> <div class='gold-grid-container'> <h4 class='calc-title'>Autocalc</h4> <h4 class='calc-title'>Stats</h4> <h4 class='calc-label'>Lift lbs.</h4> <input class='calc-field' type="text" value="" name="attr_lift" readonly> <h4 class='calc-label'>Carry lbs.</h4> <input class='calc-field' type="text" value="" name="attr_carry" readonly> <h4 class='calc-label'>Carry Max</h4> <input class='calc-field' type="text" value="" name="attr_carry_max" readonly> <h4 class='calc-label'>Run MPH</h4> <input class='calc-field' type="text" value="" name="attr_run_mph" readonly> <h4 class='calc-label'>Run/Melee</h4> <input class='calc-field' type="text" value="" name="attr_run_melee" readonly> <h4 class='calc-label'>Run/Action</h4> <input class='calc-field' type="text" value="" name="attr_run_attack" readonly> <h4 class='calc-label'>Run Minutes</h4> <input class='calc-field' type="text" value="" name="attr_run_max" readonly> <div class='spaceholder'></div> <div class='spaceholder'></div> </div> </div> .sheet-middle-grid-container{ display:grid; border:2px solid black; grid-template-columns: 175px auto grid-template-rows: auto } .sheet-blue-grid-container{ display:grid; align-items:center; padding:5px; border:2px solid #6da6c2; border-radius:5px; grid-template-columns: 65px 65px } .sheet-gold-grid-container{ display:grid; align-items:center; padding:5px; border:2px solid #c2b96d; border-radius:5px; grid-template-columns: 90px 65px } .sheet-fraction-grid-container{ display:grid; grid-template-columns: 31px 3px 31px } .sheet-statdice{ background-color: #6da6c2; } .sheet-minmax{ width: 31px; } .sheet-divider{ background-color: #5e6c5d; } .sheet-calc-field{ width: 65px; } In the game, it looks like this:

<div class='middle-grid- containter '> should be: <div class='middle-grid-container'> I feel your pain. 

Ugh...  I spent a couple hours messing around because I couldn't see the typo.  lol

Kraynic said: Ugh...  I spent a couple hours messing around because I couldn't see the typo.  lol It happens.  A trick I've learned, depending on what you're using to code the sheet, is to use the double-click to highlight a value. I'm using Atom (on Mac, though I've used others with a similar feature) and when I double-click something, all the other instances of that are also highlighted: You'll notice that attr_showhidetalismansatt is highlight twice. I use this to make sure my classes are what I expect, etc. If I double-click one that I know is correct, and I don't see one that should match, I know I have a typo somewhere. Note: I believe I had to install a plugin for Atom to do this, though, like I said, other programs have it natively.

I've thought about trying out nested grid at times, but currently I'd still go with CSS Grid for the main layout of sheet sections, and then using Flexbox for the content of each section, if I would start working on a new sheet. Gotta try it out nested at some point, but considering the subgrids can't yet use the parents grid-structure(?), it doesn't really seem to work all that better than my current flow. Finderski said: It happens.  A trick I've learned, depending on what you're using to code the sheet, is to use the double-click to highlight a value. I'm using Atom (on Mac, though I've used others with a similar feature) and when I double-click something, all the other instances of that are also highlighted: That's a great feature I hadn't thought about, thanks for bring it up! I see that Sublime Text also have this, so one more trick for me. :D