In the same character sheet I have a stack of grids, sortof, I have one grid for each section of skills/stats etc. Each and every one of those grids works the same, with the same layout as before. Here's the HTML <div class="grid-equipment">
<div class="grid-equipment-title" style="text-align: center;"><h3>Equipment</h3></div>
<div class="grid-weapon-title"><h4>Weapons</h4></div>
<div class="grid-armour-title"><h4>Armour</h4></div>
<div class="grid-tools-title"><h4>Tools</h4></div>
<div class="grid-mainHand-title"><h5>Main Hand</h5></div>
<div class="grid-mainHand-name"><input type="text" name="attr_mainHand_name" /></div>
<div class="grid-mainHand-bonus"><input type="number" name="attr_mainHand_bonus" /></div>
<div class="grid-offHand-title"><h5>Off Hand</h5></div>
<div class="grid-offHand-name"><input type="text" name="attr_offHand_name" /></div>
<div class="grid-offHand-bonus"><input type="number" name="attr_offHand_bonus" /></div>
<div class="grid-shield-title"><h5>shield</h5></div>
<div class="grid-shield-name"><input type="text" name="attr_shield_name" /></div>
<div class="grid-shield-bonus"><input type="number" name="attr_shield_bonus" /></div>
<div class="grid-amulet-title"><h5>amulet</h5></div>
<div class="grid-amulet-name"><input type="text" name="attr_amulet_name" /></div>
<div class="grid-amulet-bonus"><input type="number" name="attr_amulet_bonus" /></div>
<div class="grid-ring1-title"><h5>ring 1</h5></div>
<div class="grid-ring1-name"><input type="text" name="attr_ring1_name" /></div>
<div class="grid-ring1-bonus"><input type="number" name="attr_ring1_bonus" /></div>
<div class="grid-ring2-title"><h5>ring 2</h5></div>
<div class="grid-ring2-name"><input type="text" name="attr_ring2_name" /></div>
<div class="grid-ring2-bonus"><input type="number" name="attr_ring2_bonus" /></div>
<div class="grid-helm-title"><h5>helm</h5></div>
<div class="grid-helm-name"><input type="text" name="attr_helm_name" /></div>
<div class="grid-helm-bonus"><input type="number" name="attr_helm_bonus" /></div>
<div class="grid-chest-title"><h5>chest</h5></div>
<div class="grid-chest-name"><input type="text" name="attr_chest_name" /></div>
<div class="grid-chest-bonus"><input type="number" name="attr_chest_bonus" /></div>
<div class="grid-gloves-title"><h5>gloves</h5></div>
<div class="grid-gloves-name"><input type="text" name="attr_gloves_name" /></div>
<div class="grid-gloves-bonus"><input type="number" name="attr_gloves_bonus" /></div>
<div class="grid-arms-title"><h5>arms</h5></div>
<div class="grid-arms-name"><input type="text" name="attr_arms_name" /></div>
<div class="grid-arms-bonus"><input type="number" name="attr_arms_bonus" /></div>
<div class="grid-legs-title"><h5>legs</h5></div>
<div class="grid-legs-name"><input type="text" name="attr_legs_name" /></div>
<div class="grid-legs-bonus"><input type="number" name="attr_legs_bonus" /></div>
<div class="grid-boots-title"><h5>boots</h5></div>
<div class="grid-boots-name"><input type="text" name="attr_boots_name" /></div>
<div class="grid-boots-bonus"><input type="number" name="attr_boots_bonus" /></div>
<div class="grid-tools-field"><textarea></textarea></div>
</div> This part however puts everything underneath one another, while the css and the html have the same kind of layout (except for the <input type="text"> area here's the css .sheet-grid-equipement {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.sheet-grid-equipment-title { grid-area: 1 / 1 / 2 / 10; }
.sheet-grid-weapon-title { grid-area: 2 / 1 / 3 / 4; }
.sheet-grid-armour-title { grid-area: 2 / 4 / 3 / 7; }
.sheet-grid-tools-title { grid-area: 2 / 7 / 3 / 10; }
.sheet-grid-mainHand-title { grid-area: 3 / 1 / 4 / 2; }
.sheet-grid-mainHand-name { grid-area: 3 / 2 / 4 / 3; }
.sheet-grid-mainHand-bonus { grid-area: 3 / 3 / 4 / 4; }
.sheet-grid-offHand-title { grid-area: 4 / 1 / 5 / 2; }
.sheet-grid-offHand-name { grid-area: 4 / 2 / 5 / 3; }
.sheet-grid-offHand-bonus { grid-area: 4 / 3 / 5 / 4; }
.sheet-grid-shield-title { grid-area: 5 / 1 / 6 / 2; }
.sheet-grid-shield-name { grid-area: 5 / 2 / 6 / 3; }
.sheet-grid-shield-bonus { grid-area: 5 / 3 / 6 / 4; }
.sheet-grid-amulet-title { grid-area: 6 / 1 / 7 / 2; }
.sheet-grid-amulet-name { grid-area: 6 / 2 / 7 / 3; }
.sheet-grid-amulet-bonus { grid-area: 6 / 3 / 7 / 4; }
.sheet-grid-ring1-title { grid-area: 7 / 1 / 8 / 2; }
.sheet-grid-ring1-name { grid-area: 7 / 2 / 8 / 3; }
.sheet-grid-ring1-bonus { grid-area: 7 / 3 / 8 / 4; }
.sheet-grid-ring2-title { grid-area: 8 / 1 / 9 / 2; }
.sheet-grid-ring2-name { grid-area: 8 / 2 / 9 / 3; }
.sheet-grid-ring2-bonus { grid-area: 8 / 3 / 9 / 4; }
.sheet-grid-helm-title { grid-area: 3 / 4 / 4 / 5; }
.sheet-grid-helm-name { grid-area: 3 / 5 / 4 / 6; }
.sheet-grid-helm-bonus { grid-area: 3 / 6 / 4 / 7; }
.sheet-grid-chest-title { grid-area: 4 / 4 / 5 / 5; }
.sheet-grid-chest-name { grid-area: 4 / 5 / 5 / 6; }
.sheet-grid-chest-bonus { grid-area: 4 / 6 / 5 / 7; }
.sheet-grid-gloves-title { grid-area: 5 / 4 / 6 / 5; }
.sheet-grid-gloves-name { grid-area: 5 / 5 / 6 / 6; }
.sheet-grid-gloves-bonus { grid-area: 5 / 6 / 6 / 7; }
.sheet-grid-arms-title { grid-area: 6 / 4 / 7 / 5; }
.sheet-grid-arms-name { grid-area: 6 / 5 / 7 / 6; }
.sheet-grid-arms-bonus { grid-area: 6 / 6 / 7 / 7; }
.sheet-grid-legs-title { grid-area: 7 / 4 / 8 / 5; }
.sheet-grid-legs-name { grid-area: 7 / 5 / 8 / 6; }
.sheet-grid-legs-bonus { grid-area: 7 / 6 / 8 / 7; }
.sheet-grid-boots-title { grid-area: 8 / 4 / 9 / 5; }
.sheet-grid-boots-name { grid-area: 8 / 5 / 9 / 6; }
.sheet-grid-boots-bonus { grid-area: 8 / 6 / 9 / 7; }
.sheet-grid-tools-field { grid-area: 3 / 7 / 9 / 10; }