Custom Character sheet grid alignment (misc. oddities)

Below is a section of a character sheet I'm working on; It's just about useable in this state but there are a couple of things bugging me which I can't figure out; 1) textarea sections are spilling out of their cells 2) I would like the rows to be uniform (rows can be different heights to each other if needed, but elements within a row should be the same height to give a solid band of colour.) 3) value boxes are not filling their cells If anyone has suggestions on how to fix these it would be greatly appreciated (I've tried playing around with different combinations of width/height/position/margin to no avail.  The closest I came was by specifying a size as style="<>" for each entry) HTML <div class="sheet-clan-grid-container"> <input class="clan-header" style="grid-column: span 3" type="text" placeholder="Clan Name"/> <div class="clan-subheader" style="grid-column: span 3">Attributes (Assets)</div> <div class="clan-odd">Might</div> <input class="clan-odd-input" type="number" name="attr_clan_might"/> <textarea class="clan-odd-input center" name="attr_clan_might_assets" placeholder="Might Assets"/> <div class="clan-even">Wealth</div> <input class="clan-even-input" type="number" name="attr_clan_wealth"/> <textarea class="clan-even-input center" name="attr_clan_wealth_assets" placeholder="Wealth Assets"/> <div class="clan-odd">Influence</div> <input class="clan-odd-input" type="number" name="attr_clan_influence"/> <textarea class="clan-odd-input center" name="attr_clan_influence_assets" placeholder="Influence Assets"/> <div class="clan-even">Espionage</div> <input class="clan-even-input" type="number" name="attr_clan_espionage"/> <textarea class="clan-even-input center" name="attr_clan_espionage_assets" placeholder="Espionage Assets"/> <div class="clan-odd center">Spiritual</div> <input class="clan-odd-input center" type="number" name="attr_clan_spiritual"/> <textarea class="clan-odd-input center" name="attr_clan_spiritual_assets" placeholder="Spiritual Assets"/> </div> <div class="sheet-clan-foot-grid-container"> <div class="clan-subheader">Structure</div> <div class="clan-subheader">Stability</div> <div class="clan-subheader">Scope</div> <input class="clan-odd-input" type="number" name="attr_clan_structure"/> <div> <input class="clan-odd-input" style="float: left" type="number" name="attr_clan_stability"/> <div style="font-weight: bold; float: left; padding: 3px">/</div> <input class="clan-max-input" style="float: left" type="number" name="attr_clan_max_stability" disabled="disabled"/> </div> <select class="clan-odd-input" type="number" name="attr_clan_scope"> <option value="local">Local</option> <option value="regional">Regional</option> <option value="national">National</option> <option value="world">World</option> </select> </div> CSS /*CLAN*/ .charsheet .clan-header { border: 1px solid black; background-color: #20124d; color: white; font-weight: bold; font-size:24px; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; position: relative; } .charsheet .clan-subheader { border: 1px solid black; background-color: black; color: white; font-weight: bold; font-size:18px; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; position: relative; } .charsheet .clan-odd { font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; padding: 6px; position: relative; } .charsheet .clan-odd-input { background-color: transparent; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; width: 100%; height: 100%; } .charsheet .clan-even { background-color: #d9d2e9; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; padding: 4px; position: relative; } .charsheet .clan-even-input { background-color: #d9d2e9; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; width: 100%; height: 100%; } .charsheet textarea { width: 100%; height: 100%; } .charsheet .clan-max-input { background-color: #20124d; color: white; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; } .sheet-clan-grid-container {          display: grid;          grid-template-columns: 3fr 1fr 3fr;          align-items: center; border: 2px solid black; } .sheet-clan-foot-grid-container {          display: grid;          grid-template-columns: 1fr 1fr 1fr;          align-items: center;          border: 2px solid black; }

Hi Lawman41, I'm no expert by any means, just started working on my own sheet, but I found out these things so far that might help you: - If you open developer tools in your browser via F12 you can see what styling gets applied. I've found this generally very helpful while working on styling. You can even add/edit styles on the fly to experiment what happens. If you use Chrome there's useful info here on what it can do:  View and change CSS - Chrome Developers  (I think it will work very similarly in the other big browsers too) - I noticed roll20 applies quite a lot of styling to inputs already, and the way they are targeted sometimes means their styling takes precedence over what you put in your css. By being more specific with your selectors I've managed to work around that. In my case I used .ui-dialog .charsheet input { width: 99%; } I'm not sure what's up with your textarea, but I'm sure with developer tools you can get more insight in what's going on. Hope this helps.

1) just like Olaf suggested, try change the textarea width/height to something else, as the vaules you use now clearly doesn't work. Maybe try: .charsheet textarea { width: 98%; height: 98%; } or set i to a specific value, like&nbsp; width: 95px; 2) look at the css grid stretch and basis properties, so your elements fill up the full grid cell. <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow">https://css-tricks.com/snippets/css/complete-guide-grid/</a> 3) If your CSS doesn't seem to affect something on your sheet, you need to increase the specificity of your CSS rule, to override roll20's general styling. With input in general, I always reference the element &amp; type, or the CSS doesn't tend to work. .charsheet input[type="number"] .clan-even-input { background-color: #d9d2e9; font-family:'Aclonica','Manga-Temple-Regular','Kaushan Script', Arial; text-align: center; width: 100%; height: 100%; } Roll20 default css defines&nbsp; input[type="number"] , input[type="text"] etc, which has higher specificity than than just using classes, which means that your .clan-max-input will be overruled by CSS that affects input[type="number"] . I recommend you take time to learn more CSS basics, it will make things easier as you continue working on your sheet.