Mysteriously broken CSS Grid & Textarea

I'm sure this is just a mistake I've overlooked.

In the code below, there are two columns, right next to each other.  The one on the left is displayed as desired.  The one on the right is squeezed near the top of the grid so that the bottom halves of 6 of the cells in the column are covered because they are scrunched up near the top.  Both columns are otherwise the same.  I don't know what's going on with that.

Now, I have removed a lot of code to narrow the focus down to only the issues shown.  Because of this, looking at this example does not make it clear why, but I don't have the option of making all the cells cover only one row.  You'll notice that some cells cover two rows, while others only cover one.

<div class="abilitiesGrid lightBlueBackground blueBorder">

	<!-- abilitiesGrid temporary modifiers -->
	<div class="tag blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tmp blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tms blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tmt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tob blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tpe blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tpr blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="tps blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>

	<!-- abilitiesGrid ability totals -->
	<div class="pst blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="pet blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="agt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="obt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="mst blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="met blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="prt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="mtt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	<div class="mpt blueBackground section">
		<input class="field derivedAbility section" value="val"/>
	</div>
	
	<!-- abilitiesGrid base attacks and defense modifiers -->
	<div class="arl blueBackground section">
		<div class="fieldLabel white section">Armor</div>
	</div>
	<div class="atl blueBackground section">
		<div class="fieldLabel white section">Attribute</div>
	</div>
	<div class="bsl blueBackground section">
		<div class="fieldLabel white section">Base</div>
	</div>
	<div class="skl blueBackground section">
		<div class="fieldLabel white section">Skill</div>
	</div>
	<div class="stl blueBackground section">
		<div class="fieldLabel white section">Subtotal</div>
	</div>
	<div class="na blueBackground section">
		<div class="fieldLabel white section">Notes</div>
		<textarea class="textarea section" name="attr_notes_abilities"></textarea>
	</div>
</div>

.sheet-abilitiesGrid {
    display: grid;
    width: 250px;
    height: 360px;
    grid-gap: 0px;
    grid-template-columns: 50px 50px 150px;
    grid-template-rows: 20px 20px 20px 20px 20px 20px 40px 40px 40px 40px 40px 40px;
    grid-template-areas:
    "tps pst arl"
    "tps pst bsl"
    "tpe pet atl"
    "tpe pet skl"
    "tag agt stl"
    "tag agt na"
    "tob obt na"
    "tms mst na"
    "tme met na"
    "tpr prt na"
    "tmt mtt na"
    "tmp mpt na";
}

/*----------------- GENERAL CSS ------------------*/

.sheet-textarea {
    width: 100% !important;
    height: 233px !important;
    border: 1px solid #4169E1;
    border-radius: 0px;
    margin: 0px 0px;
    font-size: 14px !important;
    text-align: center;
    background-color: white;
}

.sheet-section {
    padding: 0px;
    border-style: none;
}

/*------------- Section-specific CSS -------------*/

/* column 1 */
.sheet-tps {grid-area: tps;}
.sheet-tpe {grid-area: tpe;}
.sheet-tag {grid-area: tag;}
.sheet-tob {grid-area: tob;}
.sheet-tms {grid-area: tms;}
.sheet-tme {grid-area: tme;}
.sheet-tpr {grid-area: tpr;}
.sheet-tmt {grid-area: tmt;}
.sheet-tmp {grid-area: tmp;}

/* column 2 */
.sheet-ags {grid-area: agt;}
.sheet-mes {grid-area: met;}
.sheet-mps {grid-area: mpt;}
.sheet-mss {grid-area: mst;}
.sheet-mts {grid-area: mtt;}
.sheet-obs {grid-area: obt;}
.sheet-pes {grid-area: pet;}
.sheet-prs {grid-area: prt;}
.sheet-pss {grid-area: pst;}

/* column 3 */
.sheet-arl {grid-area: arl;}
.sheet-atl {grid-area: atl;}
.sheet-bsl {grid-area: bsl;}
.sheet-skl {grid-area: skl;}
.sheet-stl {grid-area: stl;}
.sheet-na  {grid-area: na;} 

.sheet-field {
    border: 1px solid #4169E1;
    border-radius: 0px;
    margin: 0px 0px;
    width: 100% !important;
}
	
.sheet-manual {
	margin-top: 1px;
    font-size: 14px !important;
    height: 23px !important;
    text-align: center;
    vertical-align: text-top;
	background-color: white;
}

.sheet-derivedAbility {
	display: inline-block;
    font-size: 22px !important;
    height: 38px !important;
    text-align: center;
    vertical-align: text-top;
	background-color: white;
}

.sheet-fieldLabel {
    font-size: 12px !important;
    font:caption;
    text-align: center;
}

.sheet-white {color: white;}
.sheet-right {text-align: right;}
.sheet-blueBackground {background-color: #4169E1;}
.sheet-lightBlueBackground {background-color: #1E90FF;}
.sheet-blueBorder {border: 2px solid #4169E1;}

There were originally two issues in the above code.  I've since solved the textarea issue and edited the above post accordingly.  The broken CSS Grid issue remains.

So, I pulled out all the problematic code, and started from a place of no issues.  Then added in blank fields and made sure they were working correctly.  Then, bit by bit, I modified the blank fields until they were exactly what I want.  In the process, I did find the issue.

The issue was that I had this:

/* column 2 */
.sheet-ags {grid-area: agt;}
.sheet-mes {grid-area: met;}
.sheet-mps {grid-area: mpt;}
.sheet-mss {grid-area: mst;}
.sheet-mts {grid-area: mtt;}
.sheet-obs {grid-area: obt;}
.sheet-pes {grid-area: pet;}
.sheet-prs {grid-area: prt;}
.sheet-pss {grid-area: pst;}

/* column 2 */
.sheet-agt {grid-area: agt;}
.sheet-met {grid-area: met;}
.sheet-mpt {grid-area: mpt;}
.sheet-mst {grid-area: mst;}
.sheet-mtt {grid-area: mtt;}
.sheet-obt {grid-area: obt;}
.sheet-pet {grid-area: pet;}
.sheet-prt {grid-area: prt;}
.sheet-pst {grid-area: pst;}

Having so short names made the code night-unreadable and harder to spotting mistakes. Use longer names in the future. I can certainly say that I wouldn't have spent my time trying to troubleshoot your code had you not fixed things yourself.

You can look at my "Feast of Legends" or "Ambition & Avarice" sheet for example of more readable code, although it's a bit overkill at some points.