To understand grids, the best thing to do is set aside your sheet for a couple of days, and create a completely new character sheet with just a small section, and get it working there. We can help you. You'll find it's actually pretty simple, sompared to some things in sheet design. But trying to add it to a sheet already, with various CSS and other stuff already working, could easily be creating conflicts. Once you figure out the basic principles it would be easy to adapt. That said, I notice a few issues with your CSS .charsheet .sheet-location {
display : grid;
grid-template-columns : 0.5 fr 1.5 fr;
grid-template-rows : repeat (5, 1fr);
gap : 1px 1px ;
grid-template-areas : "dob sheet-dobinput"
"sheet-locality sheet-localityinput"
"sheet-society sheet-societyinput"
"sheet-era sheet-eradropdown"
"sheet-grace graceinput" ;
grid-area : sheet-location;
}
.charsheet .sheet-dob { grid-area : sheet-dob; }
.charsheet .sheet-dobinput { grid-area : sheet-dobinput; }
.charsheet .sheet-locality { grid-area : sheet-locality; }
.charsheet .sheet-localityinput { grid-area : sheet-localityinput; }
.charsheet .sheet-society { grid-area : sheet-society; }
.charsheet .sheet-societyinput { grid-area : sheet-societyinput; }
.charsheet .sheet-era { grid-area : sheet-era; }
.charsheet .sheet-eradropdown { grid-area : sheet-eradropdown; }
.charsheet .sheet-grace { grid-area : sheet-grace; }
.charsheet .sheet-graceinput { grid-area : sheet-graceinput; } The grid areas you have here dont match up properly. Firstly, grid-area names are not classses, so you dont need sheet- at the start of them. But if you do have sheet- at the start, you have to be consistent. Notice this line: "sheet-grace graceinput" ; refers to a graceinput gridarea, but the bottom class in the above section has a sheet-graceinput gridarea, There's a dob too, vs a sheet-dob. and for a section like that, where you have 2 rows of columns, you dont actually need to grid areas. This would probably work if you just did .charsheet .sheet-location {
display : grid;
grid-template-columns : 0.5 fr 1.5 fr;
gap : 1px 1px ;
}
When you have grid-template-columns, it'll automatically organise all html tags on the level below it into two columns. So if you have something like <div class="sheet-location"> <a label> <an input> <a label> <an input> <a label> <an input> <a label> <an input> </div> then the above grid css will automatically organise it into 2 columns, with a label and an input on each row. You only need to use grid-area to position things which aren't the same size, where some items span multiple columns or rows.
