Custom Character Sheet - Layout Not Working

Hi, I've tried using grid-template-areas to better fit my custom character sheet but it hasn't worked. I used GiGs' website to help me. The layout just becomes overlapped. Code is here <a href="https://github.com/Tentorian/roll20code" rel="nofollow">https://github.com/Tentorian/roll20code</a> (hopefully link works) Thanks!

What exactly isn't working? Here's what it looks like when I load that code:

Hi Scott, Thanks for looking into this for me. If you look at the old css code you'll see how the sheet was set up properly, but I wanted it a little more compact. Like the above screenshot (can't move it for some reason). I tried using the code: grid-template-areas: "char desc" "attr skill" "save skill" "equipment" "deploy" "notes" "inv money" "notes2"; Thanks, Travis

Hi Travis, here's some info on grid-template-areas: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas</a> You probably need to change your grid-template-area line(s).&nbsp; Maybe something like this; .charsheet div.sheet { background-color: darkcyan; padding: 20px; display: grid; grid-template-areas: "char desc" "attr skill" "save skill" "equipment equipment" "deploy deploy" "notes notes" "inv money" "notes2 notes2"; }

To be clear, what Vince is talking about is that you need to declare the same number of areas in each row so, for example, the equipment area needs to be declared twice (for each grid-cell that it is going to be a part of). The multiline formatting that Vince shows is best practice as it makes the grid-areas more human readable, but doing them in a single line won't cause any code parsing issues.

Couldn't add this image to the previous post for some reason, but here's the layout with the code changes Vince recommended: I'd recommend also changing your grid setup so that you define the grid cell widths with fr &nbsp;units to make the layout more responsive. Currently you need to drag the character sheet to about twice it's default width in order to see all the content.

Thank you both so much, this has worked but now the headings aren't appearing. I also tried incorporating the fr units but I'm not sure I've done it correctly? <a href="https://github.com/Tentorian/roll20code" rel="nofollow">https://github.com/Tentorian/roll20code</a> Thank you both for helping me with this :)

Do you have the class for "title" defined as a grid-area? Although you may define your "wrapper" columns with 1fr 1fr, you still might experience overflow issues if your grid-areas are using a fixed size. You can mix and match fr with em, px, %, whatever. You might need to adjust those "sub-column" widths used in each defined grid-area.

Yes, I have the following: &lt;div class="title"&gt; &nbsp;&nbsp;&nbsp; &lt;h1&gt;Titan: Ascension&lt;/h1&gt; &lt;/div&gt; and .charsheet div.sheet { &nbsp; background-color: darkcyan; &nbsp; padding: 20px; &nbsp; display: grid; &nbsp; grid-template-columns: 1fr 1fr; &nbsp; grid-template-areas: &nbsp;&nbsp;&nbsp; "title title" &nbsp;&nbsp;&nbsp;&nbsp;"char desc" &nbsp;&nbsp;&nbsp; "attr skill" &nbsp;&nbsp;&nbsp; "save skill" &nbsp;&nbsp;&nbsp; "equipment equipment" &nbsp;&nbsp;&nbsp; "deploy deploy" &nbsp;&nbsp;&nbsp; "notes1 notes2" &nbsp;&nbsp;&nbsp; "inv money" &nbsp;&nbsp;&nbsp; "notes3 notes3";

But do you have a div.title defined?&nbsp; ie div.title { &nbsp;&nbsp;&nbsp; grid-area: title; }

No, do I need that for each heading? Edit: Sorry I see what you mean, no I don't I'll give that a go!

I believe you need to define any grid-area you are calling from the parent/wrapper class otherwise the css doesn't have a clue about that sub-section.&nbsp; I normally do not use grid-area (usually I set things up with just grid-template-columns and use grid-column/grid-row to handle spans) so I'm not totally sure. ;-(

Okay I'm so close haha! All that's wrong now is the large gap in the middle (probably doing the fr units wrong?) and there are empty boxes (see below). Code: <a href="https://github.com/Tentorian/roll20code" rel="nofollow">https://github.com/Tentorian/roll20code</a> So the purple arrow shows the gap I want closed - only to around 10px probably? And the red crosses show the boxes that shouldn't be there, with the red arrows showing where the tables should be. This is consistent throught the rest of the sheet. Thank you :)

Sorry I didn't see your reply before posting mine - could I possibly just use grids within grids?

I havent looked at the restof the sheet, but yes you can use grids within grids. I do this constantly.

Travis T. said: Sorry I didn't see your reply before posting mine - could I possibly just use grids within grids? Nothing wrong with what you are doing.&nbsp; There are 1001 ways to skin an orc... Looks like you've nested your stats, skillscores, and wherever else you are seeing the big white boxes, within each other.&nbsp;ie "Russian-doll" style.&nbsp; &lt;div class="stats"&gt; &nbsp;&nbsp; &lt;div class="stats"&gt; &nbsp; &nbsp; ... &nbsp;&nbsp; &lt;/div&gt; &lt;/div&gt; Since you have those classes defined as grid-areas, the css will try and apply them wherever you are using those classes. Just remove the outer div that's using the same class and that should fix that issue.

Thank you all so much, it looks amazing now! Really appreciate the quick and thoughtful help from this community :)