I am once again asking for help with CSS GridArea

Ok, I have been reading, watching and even playing with the frog game to try to understand CSS. But I am having some issues getting the elements of the sheet to stay inside their designated area. I also try looking at other sheets but I don't see much of a diference. The HTML code is a bit long but it's just because it has many abilities/bonus/stats on it, and the CSS is very short. This is the HTML Code: HTML Code This is the CSS Code: CSS Code The only thing I want to do, is be able to have the stats in 3 different areas, and do the same with abilities.

I definitely wouldn't be using Roll20's col classes while trying to implement your own CSS grid, it'll just confuse you. It doesn't look like its actually doing anything anyway, so there's that. It would help a lot if you had a mock screenshot of what you would like it to look like so we can help you get from a point A to a point B.  That being said, you've correctly laid out your grid area names but I am noticing that in your html you haven't assigned the classes to any sections to actually put them in their areas. Your entire sheet is inside a sheet-name-section and therefore is correctly being put in the 'name' grid section... 

This is what I want for the final result: Image About assigning the class to sections, I might be wrong but I think I did that. They are something like: " < div class =" cuerpo " >", or " < div class =" proezas " >". And also, I can link an image if you like but, the Stats are all for some reason all laid in the "Cuerpo" section, and all the Abilties are inside the "Mente" section, leaving all other sections empty.

Grid areas only affect direct children. For instance, if you set your grid up in class "main", that grid will only apply to elements in that div. In your instance, you had several intermediate divs, which were just being applied into the grid at random. Another issue that you have is that your selects are over-spilling their bounds. I made a few simple changes and you'll be able to see that it sets your items in to the relevant grid areas. Github Gists: CSS | HTML

Oooh, I can see an important issue. The div which you have the main grid div only has one item nested in it Maybe I just have old html because I tried looking up your cuerpo/proezas classes and they aren't in there. 

Nic B. said: Grid areas only affect direct children. For instance, if you set your grid up in class "main", that grid will only apply to elements in that div. In your instance, you had several intermediate divs, which were just being applied into the grid at random. Another issue that you have is that your selects are over-spilling their bounds. I made a few simple changes and you'll be able to see that it sets your items in to the relevant grid areas. Github Gists: CSS | HTML Ahhh... Thank you, now everything is clear to me, it was such an obvious mistake. Thank you both for your help!

In an unrelated question, is there a way to hide this: Until you hover over them?

Yup, try this /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button :not(:hover), input::-webkit-inner-spin-button:not(:hover)  {   -webkit-appearance :  none ;   margin :  0 ; } /* Firefox */ input[type=number]:not(:hover)  {   -moz-appearance :  textfield ; }

Richard T. said: Yup, try this /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button :not(:hover), input::-webkit-inner-spin-button:not(:hover)  {   -webkit-appearance :  none ;   margin :  0 ; } /* Firefox */ input[type=number]:not(:hover)  {   -moz-appearance :  textfield ; } Thank you! It worked perfectly! Sorry for the delay on the response

One last question I swear. I wanted to make it so the lines that says: Cuerpo "X", Mente "X", Espiritu "X" are on the center on the top of the container, but the Stats (Fuerza, Destreza and Constitucion) retain their flexible center position. This is the relevant code: HTML: &lt;div class="cuerpo"&gt; &lt;div class="cue"&gt;&lt;h2&gt;Cuerpo&lt;/h2&gt; &lt;input type="number" name="attr_cuerpo" value="0" title="@{cuerpo}" readonly&gt;&lt;/div&gt; &lt;div class="estadisticas-cuerpo"&gt; &lt;button class="buttonstyle" name="roll_fuerza" type="roll" value="&amp;{template:default} {{name=Fuerza}} {{Resultado=[[(@{fuerza}d10!!+@{fuerza_flat})]]}}"&gt;Fuerza&lt;/button&gt; &lt;input class="nmr1" type="number" name="attr_fuerza_base" value="1" &gt; &lt;input type="hidden" name="attr_fuerza_talent" value="0" readonly&gt; &lt;input type="hidden" name="attr_fuerza_item" value="0" readonly&gt; &lt;input type="hidden" name="attr_fuerza_buff" value="0" readonly&gt; &lt;input type="hidden" name="attr_fuerza_fijo" value="0" readonly&gt; &lt;input class="nmr2" type="number" name="attr_fuerza" value="0" title="@{fuerza}" readonly&gt; &lt;/div&gt; &lt;div class="estadisticas-cuerpo"&gt; &lt;button class="buttonstyle" name="roll_destreza" type="roll" value="&amp;{template:default} {{name=Destreza}} {{Resultado=[[(@{destreza}d10!!+@{destreza_flat})]]}}"&gt;Destreza&lt;/button&gt; &lt;input class="nmr1" type="number" name="attr_destreza_base" value="1" &gt; &lt;input type="hidden" name="attr_destreza_talent" value="0" readonly&gt; &lt;input type="hidden" name="attr_destreza_item" value="0" readonly&gt; &lt;input type="hidden" name="attr_destreza_buff" value="0" readonly&gt; &lt;input type="hidden" name="attr_destreza_fijo" value="0" readonly&gt; &lt;input class="nmr2" type="number" name="attr_destreza" value="0" title="@{destreza}" readonly&gt; &lt;/div&gt; &lt;div class="estadisticas-cuerpo"&gt; &lt;button class="buttonstyle" name="roll_constitucion" type="roll" value="&amp;{template:default} {{name=Constitución}} {{Resultado=[[(@{constitucion}d10!!+@{constitucion_flat})]]}}"&gt;Constitución&lt;/button&gt; &lt;input class="nmr1" type="number" name="attr_constitucion_base" value="1" &gt; &lt;input type="hidden" name="attr_constitucion_talent" value="0" readonly&gt; &lt;input type="hidden" name="attr_constitucion_item" value="0" readonly&gt; &lt;input type="hidden" name="attr_constitucion_buff" value="0" readonly&gt; &lt;input type="hidden" name="attr_constitucion_fijo" value="0" readonly&gt; &lt;input class="nmr2" type="number" name="attr_constitucion" value="0" title="@{constitucion}" readonly&gt; &lt;/div&gt; &lt;/div&gt; CSS: .sheet-cuerpo { grid-area: cuerpo; display: flex; flex: auto; flex-flow: column nowrap; justify-content: space-evenly; font-size: 15px; border: 10px solid transparent; border-image: url(<a href="https://i.imgur.com/xq0JxTz.png" rel="nofollow">https://i.imgur.com/xq0JxTz.png</a>) 30 stretch; } div.sheet-estadisticas-cuerpo, .sheet-estadisticas-mente, .sheet-estadisticas-espiritu, .sheet-habilidades-proezas, .sheet-habilidades-conocimientos, .sheet-habilidades-sociales { display: inline-block; } input.sheet-nmr1 { align-items: center; position: relative; background: white; border-radius: 8px; font-size: 17px; border: 1px solid black; } input.sheet-nmr2 { align-items: center; position: relative; border-width: 50%; background: whitesmoke; border-radius: 50%; font-size: 17px; border: 1px solid black; font-weight: bolder; } div.sheet-cue, .sheet-men, .sheet-esp { padding: 0px; margin: 0px; font-size: 23px; font-weight: bolder; text-align: center; } div.sheet-cue input, .sheet-men input, .sheet-esp input { border: 1px solid black; }

I think there's a couple missing CSS but the code you've given basically looks like that already? I'm confused on what you are looking to do with it.&nbsp;

Richard T. said: I think there's a couple missing CSS but the code you've given basically looks like that already? I'm confused on what you are looking to do with it.&nbsp; Yeah sorry, the example was confusing. Those are all the stats of the system, I want the "Titles" Cuerpo, Mente and Espiritu to all share the same position. I want them to be on top of the black line that is drawn.

Hmm, I noticed that the Cuerpo title is in a div.cue, are the others not using that class?&nbsp; If they are using that class, it might be because the flex is trying to evenly space the content. You can add a set Height to the .cue class to make it static and have the other elements adjust themselves to split up the rest of the space between themselves.&nbsp;