Help with CSS grid

Hello, My code for CSS grid doesn't work and I don't know why. I don't see any error in my code, can you help me please ? Here the pastebin link of my code HTML Code CSS Code Thanks for you help.

Try it after removing "&amp;family=MedievalSharp" from the Font Import line. 'Tis a guess based on&nbsp; Roll20 article:&nbsp; <a href="https://wiki.roll20.net/Building_Character_Sheets" rel="nofollow">https://wiki.roll20.net/Building_Character_Sheets</a> The important section is Google Fonts: " NOTE: &nbsp;Do&nbsp; NOT &nbsp;use any fonts that contain&nbsp; eval &nbsp;in the name (e.g.&nbsp; MedievalSharp ). That string (even when in the middle of a font name) causes security issues with Roll20 and the CSS will get thrown out completely."

Hello. I have removed it but it's not the problem.

Using your code without any edits, it appears to work. Here's the layout I get by putting that code into a custom game: That is the layout I'd expect to see based on my reading of your css.

Hello Scott. It does'nt work because in my grid-template-area , I have make this : /*PC wrappers*/ &nbsp; &nbsp; .pc-principal { &nbsp; &nbsp; &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; &nbsp; &nbsp; gap : 1px ; &nbsp; &nbsp; &nbsp; &nbsp; grid-template-columns : repeat ( 2 , 50% ); &nbsp; &nbsp; &nbsp; &nbsp; grid-auto-rows : minmax ( 50px , auto ); &nbsp; &nbsp; &nbsp; &nbsp; grid-template-areas : &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "perso &nbsp; &nbsp; &nbsp;perso" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "carac &nbsp; &nbsp; &nbsp;health" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "bourse &nbsp; &nbsp; honneur" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "attributs &nbsp;affDiv" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "attributs &nbsp;carRace" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "resMag &nbsp; &nbsp; resMag" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "charge &nbsp; &nbsp; charge" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "competence competence" ; &nbsp; &nbsp; } The "Santé" box (health in the grid-template-area) should be next to the "Caractéristiques" box (carac in the grid-template-area).

ah! sorry, the content of the carac section threw me because it looked placed correctly, missed that it was stretched out. The issue is that your tab control display has a higher specificity than the pc-principal styling, so it is forcing it to be display: block. To fix the issue, I'd change this section of your css: &nbsp; &nbsp; /*PJ (PC) sheet*/ &nbsp; &nbsp; .charsheet .pc-principal, &nbsp; &nbsp; .charsheet .pc-equipment, &nbsp; &nbsp; .charsheet .pc-grimoire, &nbsp; &nbsp; .charsheet .pc-necromancy, &nbsp; &nbsp; .charsheet .pc-notes { &nbsp; &nbsp; &nbsp; &nbsp; display: none; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; .charsheet .tabstoggle[value="PC_principal"] ~ div.pc-principal, &nbsp; &nbsp; .charsheet .tabstoggle[value="PC_equipment"] ~ div.pc-equipment, &nbsp; &nbsp; .charsheet .tabstoggle[value="PC_grimoire"] ~ div.pc-grimoire, &nbsp; &nbsp; .charsheet .tabstoggle[value="PC_necromancy"] ~ div.pc-necromancy, &nbsp; &nbsp; .charsheet .tabstoggle[value="PC_notes"] ~ div.pc-notes { &nbsp; &nbsp; &nbsp; &nbsp; display: block; &nbsp; &nbsp; } to be this: .charsheet .tabstoggle:not([value="PC_principal"]) ~ div.pc-principal, .charsheet .tabstoggle:not([value="PC_equipment"]) ~ div.pc-equipment, .charsheet .tabstoggle:not([value="PC_grimoire"]) ~ div.pc-grimoire, .charsheet .tabstoggle:not([value="PC_necromancy"]) ~ div.pc-necromancy, .charsheet .tabstoggle:not([value="PC_notes"]) ~ div.pc-notes { display: none; } And apply the same logic to all your other display controls.&nbsp; This will ensure that your tab display logic will only override the display setting of that tab's content when it needs to be hidden. Also, for your grid setup, I'd recommend using 1fr instead of 50% for your column widths. This will function nearly identically, but will take the size of your gap into account as well.

I have modified it and it works. Thanks Scott.