CSS Grid setup?

Using this CSS code for a grid setup, how do I control where the HTML div-content, or any content, end up in the grid? &nbsp; div.sheet-top { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 403px 405px ; &nbsp; &nbsp; grid-template-rows : 280px 160px ; &nbsp; &nbsp; grid-template-areas : "name &nbsp; &nbsp; &nbsp; bio" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "concept &nbsp; &nbsp;bio" ; &nbsp; &nbsp; grid-gap : 6px ; &nbsp; &nbsp; width : &nbsp; &nbsp; 820px ; &nbsp; &nbsp; height : &nbsp; 1780px ; &nbsp; &nbsp; background-image : url ( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png</a> ); &nbsp; &nbsp; background-size : 813px 1762px ; &nbsp; &nbsp; background-repeat : no-repeat ; &nbsp; }

If you're using grid-template-areas, that's what that's for. You'd have a matching grid-area in the appropriate css for those, lke div.sheet-concept { grid-area: concept; } I've had to guess what the class for that div is, but you just create a grid area for each div, and it will be placed appropriately. as long as your concept, name, and bio divs are contained in the sheet-top div,, they'll be placed according grid-template-areas.

Is it ok to have two grids. like below? If so how do I control the position of these grids to the page and each other? /* DIV grid TOP*/ &nbsp; div.sheet-top { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 403px 405px ; &nbsp; &nbsp; grid-template-rows : 280px 160px ; &nbsp; &nbsp; grid-template-areas : "name &nbsp; &nbsp; &nbsp; discrp" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "pilars &nbsp; &nbsp; sostab" ; &nbsp; &nbsp; grid-gap : 6px ; &nbsp; &nbsp; width : &nbsp; &nbsp; 820px ; &nbsp; &nbsp; height : &nbsp; 1780px ; &nbsp; &nbsp; background-image : url ( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png</a> ); &nbsp; &nbsp; background-size : 813px 1762px ; &nbsp; &nbsp; background-repeat : no-repeat ; &nbsp; } /* DIV grid MID-BT*/ &nbsp; div.sheet-mid-bt { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; grid-template-columns : 200px 620px ; &nbsp; &nbsp; grid-template-rows : 280px 160px ; &nbsp; &nbsp; grid-template-areas : "mid-bt &nbsp; none" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "none &nbsp; &nbsp;none" ; &nbsp; &nbsp; grid-gap : 6px ; &nbsp; &nbsp; width : &nbsp; &nbsp; 820px ; &nbsp; &nbsp; height : &nbsp; 800px ; &nbsp; }

That CSS-grid, above, correspond to this HTML div-setup. But I don't get how to place the content &lt;div class="mid-bt"&gt; and the div-set after? &lt; div class = "top" &gt; &lt;!-- TOP grid setup --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- Investigator Name, Concept, Drive, Occupation (Occupational Benefits) --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "name section" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "section-small flex-center" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input name = "attr_character_name" type = "text" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "concept section" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "section-small flex-center2" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input name = "attr_character_concept" type = "text" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "drive section" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "section-small flex-center2" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input name = "attr_character_drive" type = "text" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "occupation section" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "section-small flex-center" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input name = "attr_character_occupation" type = "text" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "occup-ben section" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "section-small flex-center" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; textarea name = "attr_character_occup-ben" placeholder = "" scrolling = "" &gt;&lt;/ textarea &gt; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &lt;!-- Investigator Abilities:Health, Sanity, Stability, Inv. General, Free points --&gt; &lt; div class = "mid-bt" &gt; &lt;!-- MID-BT grid setup --&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div class = "hel-s-s section" &gt; &nbsp; &nbsp; &nbsp; &lt;/ div &gt; &nbsp; &nbsp; &nbsp; &lt; div class = "" style = " margin-top: 0; " &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "15" &gt;&lt; span &gt; 15 &lt;/ span &gt;&lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "max-marker" type = "radio" name = "attr_health_max" value = "15" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "14" &gt;&lt; span &gt; 14 &lt;/ span &gt;&lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "max-marker" type = "radio" name = "attr_health_max" value = "14" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "13" &gt;&lt; span &gt; 13 &lt;/ span &gt;&lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "max-marker" type = "radio" name = "attr_health_max" value = "13" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "12" &gt;&lt; span &gt; 12 &lt;/ span &gt;&lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "max-marker" type = "radio" name = "attr_health_max" value = "12" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "11" &gt;&lt; span &gt; 11 &lt;/ span &gt;&lt;/ div &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; input class = "max-marker" type = "radio" name = "attr_health_max" value = "11" &gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt; div &gt;&lt; input type = "radio" name = "attr_health" value = "10" &gt;&lt; span &gt; 10 &lt;/ span &gt;&lt;/ div &gt;

You can have multiple grids in the same sheet, but your second grid won't work, because in the template-grid-areas, its referring to itself. Also your HTML looks like its misisng a lot of &lt;/div&gt;'s. You can have multiple grids in the same sheet. Every div must be accoumpanied by an &lt;/div&gt;. You probably want a container div that both top and mid-bt are inside, then you can give that a grid, and position top and mid-bt inside it. Like &lt;div class="container"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="top"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- lots of stuff trimmed --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &lt;div class="mid-bt"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- lots of stuff trimmed --&gt; &lt;/div&gt; &lt;/div&gt; Then in your CSS /* DIV grid CONTAINER */ div.sheet-container { display:grid; &nbsp; &nbsp; grid-template-areas:"top &nbsp; &nbsp; &nbsp; top" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "mid-bt ? "; } /* DIV grid TOP*/ div.sheet-top { grid-area: top; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 403px 405px; &nbsp; &nbsp; grid-template-rows: 280px 160px ; &nbsp; &nbsp; grid-template-areas:"name &nbsp; &nbsp; &nbsp; discrp" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "pilars &nbsp; &nbsp; sostab"; &nbsp; &nbsp; grid-gap: 6px; &nbsp; &nbsp; width: &nbsp; &nbsp;820px; &nbsp; &nbsp; height: &nbsp; 1780px; &nbsp; &nbsp; background-image: url( <a href="https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png" rel="nofollow">https://raw.githubusercontent.com/Ajpirion/ToC-Char_sheet/main/ToC_R20_Char_sheet.png</a> ); &nbsp; &nbsp; background-size: 813px 1762px; &nbsp; &nbsp; background-repeat: no-repeat; } /* DIV grid MID-BT*/ div.sheet-mid-bt { grid-area: mid-bt; &nbsp; &nbsp; display: grid; &nbsp; &nbsp; grid-template-columns: 200px 620px; &nbsp; &nbsp; grid-template-rows: 280px 160px ; &nbsp; &nbsp; grid-gap: 6px; &nbsp; &nbsp; width: &nbsp; &nbsp;820px; &nbsp; &nbsp; height: &nbsp; 800px; } Chances are, you need to tweak the details-&nbsp; I'm not sure those will be arranged perfectly, but it's a start. Basically if you are using grid-areas: You create a grid as the container, then position each div it contains in the template-grid-areas, and give each of those div a grid-area identifier. Any of the grid-areas can itself be a grid, and becomes a container-&nbsp; each div ibside it can then be positioned in its grid-template-areas, and givem a grid-area identifier of its own. Note: these grids probably wont work until you fix the &lt;/div&gt; problem in your html. Also note that grid-areas is not the only way to arrange grids, but for larger items in sheet layout like these it works pretty well. I think I've already linked it before, but you'd do well to study this page: <a href="https://cybersphere.me/css-grid/" rel="nofollow">https://cybersphere.me/css-grid/</a>

I'd also add that since you are creating a new sheet, get rid of legacy:true in your JSON, and get rid of sheet- in your CSS. There are a lot of advantages in the CSE upgrade (legacy:false), and any sheet being built now should be using it. You also might want to move that background image from top into the container div, but I don't know your layout.

Thank you GiGs, I try this.

I´m just going crazy here, can´t get a grip on this coding part, it is just all over and no control. I give up, thanks again for trying. If you get some dummy version up, a step by step tutorial, otherwise It is out of my league, ping me.

Put your entire sheet (both HTML and CSS) on pastebin.com, and link them here.

This is as far as I get on my own: ToC-HTMLR20 - Pastebin.com ToC-CSSR20 - Pastebin.com

Hi Joakim, When you work with this in Roll20, do you have legacy styling enabled? I notice you have prefixed your classes in the CSS with "sheet-" which is only used when legacy CSS is enabled. In a sandbox you would need to have enabled this in the sheet.json with the setting legacy:true in it. If you use a custom sheet then there is a tickbox for using legacy sanitation. There is some information about legacy versus non-legacy here:&nbsp; <a href="https://help.roll20.net/hc/en-us/articles/360061735034-iFrame-and-Sanitization-Changes" rel="nofollow">https://help.roll20.net/hc/en-us/articles/360061735034-iFrame-and-Sanitization-Changes</a>. &nbsp; If this is a completely new sheet, then I would recommend not to use the legacy option since it is more restrictive. This means you can omit the "sheet-" prefix in the CSS (it is still needed for roll template styling though). I tested the code without the prefix first in jsfiddle and then in a new game with custom sheet where I loaded the HTML and CSS. It might not look exactly like you want the end result to look like, but it seems at least that the styling has taken effect.&nbsp; When working with grids and flex I find it easier to develop when having visible borders, which can be removed later when things look the way I like. It is just easier to see what is where and how it is aligned when you can actually see the elements.&nbsp; I hope this helps, and that you can continue to develop this sheet! Best Regards, Richard

Thanks Richard W, I keep on trying and one day I might have something that work for me. :)

I missed the notification for this earlier (Roll20's notification system is not the best). I'll have a look at those sheet files tomrrow and see if anything jumps out at me.

Thank you GiGs :) I´m making progress, small steps forward, in the sandbox. I have change the content for my Pastebin links above.

You didn't answer Richard's question above, do you have legacy checkbox on, or if you are using the sandbox legacy: true? When i look at the sheet with legacy set to true, it looks like you have the layout roughly correct, except for the description box, and just need some fine tuning of various elements. Here's a screenshot of what I see: It looks like you are trying to line your html elements to overlay a large picture of a sheet. If you look closely, you can see the boxes you have created, and for the most part they line up correctly. That's not how I'd do the sheet - basing it on a background image restricts the layout quite a bit, but you are making good progress there. What specific problem are you having?

So far I have been focusing to get a grip of how the grid-setup functions, I think I'm getting it now. I have manage to get a drop-down menu for Occupations in place, and will use that for the Drive section to. Next I will adjust the PoS and SoS inputs to fit my background sheet image, and also to get text boxes for Age, Length and Weight. For me the code is about function not form in the design. About the legacy setting, I don't use that at all to my knowledge? I keep on working on the basic and hope it will be possible to add more complex functions later on.