By the way, you don't need those <p></p> bits - the <h3> automatically starts a new line, and HTML doesn't show white space (<p></p> with nothing inside them) . Remember how I said grids can be nested? You could do that with both divs. Here's one way to do it. First, any bare text has to be put in a tag - here, I've used spans. See the Armor and Health entries. <div class="col2">
<div class="col2-left">
<h2>Defenses</h2>
<h3>Shields:</h3>
<input type="number" name="attr_shields" value="0">
<h3>Head</h3>
<span>Armor</span> <input type="number" name="attr_head_a" value="0"> <span>Health</span> <input type="number" name="attr_head_h" value="0">
<h3>Body</h3> <span>Armor</span> <input type="number" name="attr_body_a" value="0"> <span>Health</span> <input type="number" name="attr_body_h" value="0">
<h3>Left Arm</h3>
<span>Armor</span> <input type="number" name="attr_larm_a" value="0"> <span>Health</span> <input type="number" name="attr_larm_h" value="0">
<h3>Right Arm</h3>
<span>Armor</span> <input type="number" name="attr_rarm_a" value="0"> <span>Health</span> <input type="number" name="attr_rarm_h" value="0">
<h3>Left Leg</h3>
<span>Armor</span> <input type="number" name="attr_lleg_a" value="0"> <span>Health</span> <input type="number" name="attr_lleg_h" value="0">
<h3>Right Leg</h3>
<span>Armor</span> <input type="number" name="attr_rleg_a" value="0"> <span>Health</span> <input type="number" name="attr_rleg_h" value="0">
</div>
<div class="col2-right">
<h2>Weapons, Drones, Etc</h2>
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
<input type="text" value="Weapon Name"> <span>Ammunition</span> <input type="number" value="0"> <span>Battery</span> <input type="number" value="0">
</div>
</div> Secondly, the HTML ignores all white space by default - that means spaces and linebreaks. So you can organise the code in a way that makes it easy for you to read. It has its own rules for how to pirint those on a character sheet (like headings by default starton a new line, and spans and inputs don't. Thats why I have empty space in there, btw - so I can easily see where a column should end. Now we make those left and right columns each their own grid. First, couldnt how many columns we want each to have. They can be different. I could do this: div.col2 {
display: grid;
grid-template-columns: 300px 430px;
column-gap: 5px;
} div.col2 div.col2-left { display: grid;
grid-template-columns: auto auto auto auto auto; column-gap: 5px; } div.col2 div.col2-right { display: grid;
grid-template-columns: auto auto auto auto auto;
column-gap: 5px; } These create 5 column layouts, so you don't need those <br> entries - if there are more than 5 entries, they automatically go to the next line. There are a couple of problems to sort out. First, the h2 headings at the start are treated as the first column, so we need to modify them so they stretch across the fll width of the grid. We can do this like this: div.col2 h2 { grid-column: 1 / -1; } This targets any h2 elements inside the div.col2 area, and says make this column start in the first column, and end in the last column (-1 means last). Then we notice in the left grid, the fact that shields in the first row only has one entry but the rest have more, which messes up the columns. We can fix that with some CSS targetting the H3s, like so: div.col2 h3 { grid-column : 1 / 2 ; } This means those headings take up the first column, but you could instead still want them to take up a row so could do this: div.col2 h3 { grid-column : 1 / -1 ; } If you do that, you probably want to drop that dv.col2 width back to grid-template-columns: 175px 430px; There are more efficient ways to write this code. In CSS, you can separate declarations with a comma, and it will apply all declarations as if their were separate entries. For example: div.col2 , div.col2 div.col2-left , div.col2 div.col2-right { display : grid ; column-gap : 5px ; } div.col2 { grid-template-columns : 190px 430px ; } div.col2 div.col2-left { grid-template-columns : repeat(auto , 4) ; } div.col2 div.col2-right { grid-template-columns : repeat(auto , 5) ; } div.col2 h2 , div.col2 h3 { grid-column : 1 / -1 ; } Basically, you can figure out everything that has the same entry (like those display:grids at the start) and put them in a shared declaration using commas to separate each item. You could also create that layout with those h3 entries on the same line: div.col2 , div.col2 div.col2-left , div.col2 div.col2-right { display : grid ; column-gap : 5px ; } div.col2 { grid-template-columns : 300px 430px ; } div.col2 div.col2-left { grid-template-columns : repeat(5, auto ) ; } div.col2 div.col2-right { grid-template-columns : repeat(5, auto ) ; } div.col2 h2 { grid-column : 1 / -1 ; } div.col2 h3 { grid-column : 1 / 2 ; } Using CSS makes it easy to try out different layouts or styles without having to mess with the HTML. One more complication: If you put the h3 entries as the first column, they cause the inputs to stretch upwards (their height matches the heading), so you would need to either change the height of the h3 or the inout, which you could do with something like: div.col2 div.col2-left input { height: 24px; } You'd need to experiment with the height, probably. Anyway, I hope this crashcourse is useful! PS: that second column would be a lot more erlegant with a repeating section - you can look into that at your leisure and come back with questions :) You'll also ned to add name properties to the inputs in the second column - a repeating section makes that a lot easier ftrom a design point of view.
