[Splittermond] CSS Grid beginner questions

Hi, in my last thread it was recommended to learn CSS Grid and so I gave it a try. I think it's really a great way to design pages (or character sheets). I started with the upper part of the character sheet and I have the same problems like I had in my previous thread. This is how the sheet looks like (just ignore the background-colors): In the top left corner I want the text and the input field to have the same height and additionally they should have a width of (roughly) 1/6 and 5/6 of the div container they are in. Or did I misunderstood CSS Grid and I'm supposed to even create smaller grids for the HTML elements? For now this is the CSS: .sheet-container { display: grid; width: 100%; grid-template-columns: 55% 45%; grid-template-rows: 150px 150px 150px 150px; grid-template-areas: "basic logo" "basic moon1" "ep moon2" "ep moon2"; } .sheet-character-basic { grid-area: basic; } .sheet-logo { background: url(<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png</a>); background-repeat: no-repeat; background-size: contain; grid-area: logo; } .sheet-character-ep { background: green; grid-area: ep; } .sheet-character-moon2 { background: yellow; grid-area: moon2; } .sheet-default-header { background-color: #009fe3; color: white; font-weight: bold; } .sheet-default-background { background-color: #e0f2fd; } .sheet-default-attribute-tag { width: 16.66% } .sheet-default-attribute-value { width: 83.34%; } And this is the HTML: &lt;div class="main container"&gt; &lt;div class="grid-item grid-character-basic"&gt; &lt;div class="default-header default-attribute-tag"&gt;Name:&lt;/div&gt;&lt;input name="attr_character_name" class="default-background default-attribute-value" placeholder="Charaktername" /&gt; &lt;/div&gt; &lt;div class="grid-item logo"&gt;&lt;/div&gt; &lt;div class="grid-item character-ep"&gt;Item 3&lt;/div&gt; &lt;div class="grid-item character-moon2"&gt;Item 4&lt;/div&gt; &lt;/div&gt; For my understanding the div with the "Name": text in it should have a width of 1/6 and the input field should have a width of 5/6 due to their classes "default-attribute-tag" and "default-attribute-value" and together they should just fill out the whole div, but instead one is placed beneath the other. Where is my mistake? I hope that someone can help me here. Cheers!

The problem is likely the fact you are using a div to put the name in. Divs by default are&nbsp; block&nbsp; elements, which meas they take up the whole row they are on - even if their width is smaller.&nbsp; inline-block &nbsp;means they will share the row with other elements, so you can force it to behave like that by adding display:inline-block; div.sheet-default-header { &nbsp;&nbsp;&nbsp;&nbsp;display: inline-block; background-color: #009fe3; color: white; font-weight: bold; } Note that I added div at the start above. It's a good idea if you have classes applying to specific elements to link them to the type of element too. In this case, a div might not be the best element for the job. A label or span might be better, though roll20 adds a bunch of styling to labels so using div is certainly easier.

Ok - thanks so far! That worked. How can I achievere that the header div and the input element have the same height? At the moment the input field is higher. But I actually want a colored border around the two elements. I feel like that is a newbie question, but I didn't find a working solution by now. Cheers!

I tried to just set the same height for both elements, but it just didn't work: div.sheet-default-attribute-tag { width: 16.66% height: 10px; } input.sheet-default-attribute-value { width: 83.34%; height: 10px; }

Loki, as you touched on, smaller grid elements are absolutely useful for solving this problem, because you can use the grid to make component units align to each other. I created you a simple JSFiddle to demonstrate what I mean. Grids (and Flexbox in some instances) are infinitely usable, and make stuff like this a breeze. Something you might also find as you're trying to do this in Roll20 is that the VTT forces a number of styles onto things like input fields and buttons. You can overwrite these with your own classes by making sure that your selectors are more specific than Roll20's. A good way to do that is to nest a few elements together. i.e. .sheet-container .sheet-character-basic input[type="number"]

Nic B. said: [...] Something you might also find as you're trying to do this in Roll20 is that the VTT forces a number of styles onto things like input fields and buttons. You can overwrite these with your own classes by making sure that your selectors are more specific than Roll20's. A good way to do that is to nest a few elements together. i.e. .sheet-container .sheet-character-basic input[type="number"] In my experience, it's usually a good idea with inputs to specify the type (just like Nic B. shows) to ensure your css overrides the default. Sometimes things haven't changed unless I added the [type="nameoftype"].

Hi! Thank you, Nic B. and Andreas J. for your answers and hints! Just creating another grid inside a grid-area was nothing that I thought of. Of course, this makes it much easier. @Nic B. Thank you for the JSFiddle-link. I copied it to my sheet and adjusted the CSS a little bit, but it does look a little bit weird: The input still seems to be a little bit higher, therefore the border looks weird. Since it works in the JSFiddle, I think this has something to do with Roll20? Current HTML: &lt;div class="main container"&gt; &lt;div class="grid-item grid-character-basic"&gt; &lt;span class="sheet-default-attribute-label"&gt;Name: &lt;/span&gt; &lt;input class="sheet-default-attribute-value" placeholder="Charaktername" name="attr_character_name"&gt; &lt;/div&gt; &lt;div class="grid-item logo"&gt;&lt;/div&gt; &lt;div class="grid-item character-ep"&gt;Item 3&lt;/div&gt; &lt;div class="grid-item character-moon2"&gt;Item 4&lt;/div&gt; &lt;/div&gt; Current CSS: .sheet-container { display: grid; width: 100%; font-family: sans-serif; grid-template-columns: 55% 45%; grid-template-rows: 150px 150px 150px 150px; grid-template-areas: "basic logo" "basic moon1" "ep moon2" "ep moon2"; } .sheet-character-basic { display: grid; align-items: stretch; grid-area: basic; grid-template-columns: 1fr 5fr; } .sheet-logo { background: url(<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png</a>); background-repeat: no-repeat; background-size: contain; grid-area: logo; } .sheet-character-ep { background: green; grid-area: ep; } .sheet-character-moon2 { background: yellow; grid-area: moon2; } .sheet-default-background { background-color: #e0f2fd; } span.sheet-default-attribute-label { padding: 5px; background-color: #009fe3; color: #fff; font-weight: bold; } input.sheet-default-attribute-value { border: 1px solid #009fe3; background-color: #e0f2fd; } Or is there something wrong? Cheers!

Loki said: The input still seems to be a little bit higher, therefore the border looks weird. Since it works in the JSFiddle, I think this has something to do with Roll20? Yeah, you'll just have to write some css to align it with the other thing. Input elements behaves very differently from any span, div or p elements, so it's expected that it wouldn't align perfectly out of the gate.

Thank you again. Ok, I got it to work with some padding. But when I resize the screen, the span (sheet-default-attribute-label) and the div (sheet-default-attribute-value) don't grow. Since they are specified as 1fr and 5fr they should resize to the space that is left in the .character-basic-container or shouldn't they? The area is growing, but the elements are not. Greetings! HTML &lt;div class="main container"&gt; &lt;div class="grid-item grid-character-basic"&gt; &lt;span class="sheet-default-attribute-label"&gt;Name: &lt;/span&gt; &lt;input class="sheet-default-attribute-value" placeholder="Charaktername" name="attr_character_name"&gt; &lt;/div&gt; &lt;div class="grid-item logo"&gt;&lt;/div&gt; &lt;div class="grid-item character-ep"&gt;Item 3&lt;/div&gt; &lt;div class="grid-item character-moon2"&gt;Item 4&lt;/div&gt; &lt;/div&gt; CSS .sheet-container { display: grid; width: 100%; grid-template-columns: 55% 45%; grid-template-rows: 150px 150px 150px 150px; grid-template-areas: "basic logo" "basic moon1" "ep moon2" "ep moon2"; } .sheet-character-basic { display: grid; grid-template-columns: 1fr 5fr; align-items: stretch; grid-area: basic; } .sheet-logo { background: url(<a href="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png" rel="nofollow">https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Splittermond/Splittermond.png</a>); background-repeat: no-repeat; background-size: contain; grid-area: logo; } .sheet-character-ep { background: green; grid-area: ep; } .sheet-character-moon2 { background: yellow; grid-area: moon2; } .sheet-default-header { background-color: #009fe3; color: white; font-weight: bold; } .sheet-default-background { background-color: #e0f2fd; } .sheet-default-attribute-label { padding-top: 5.5px; padding-right: 5px; padding-bottom: 8px; padding-left: 5px; background-color: #009fe3; color: #fff; font-weight: bold; } .sheet-default-attribute-value { border: 1px solid #009fe3; }

Loki said: But when I resize the screen, the span (sheet-default-attribute-label) and the div (sheet-default-attribute-value) don't grow. Since they are specified as 1fr and 5fr they should resize to the space that is left in the .character-basic-container or shouldn't they? The area is growing, but the elements are not. Roll20 have some default behaviour on several of the elements, so you need to try edit the input and the span and set their width to work with the stretch things. something like "width: 100%", or "width: fitcontent". <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/width</a> ButI have to admit I usually adjust inputs widths manually after I've got everything else to behave like I want. Input and select elements are tricky to behave as you'd want with flexbox or grid, you need to change their default behaviour in most cases. Look at the pattern libraries for some better default that might work more smoothly. <a href="https://wiki.roll20.net/Sheet_Author_Tips#Pattern_Libraries_.26_Components" rel="nofollow">https://wiki.roll20.net/Sheet_Author_Tips#Pattern_Libraries_.26_Components</a>