Big blank space on one of my custom sheet element

Hello, My element "Defense" ends with a big blank space for a reason i can't find by myself. And ideally i would like it to stick to the content of its division, just like my other elements. Does someone knows what could set it like this ?&nbsp; Here is my html : &lt;div class="defenses"&gt; &nbsp; &lt;h2 class="titregauche"&gt; Défenses &lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="defensegear"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h4&gt; Equipement défensif &lt;/h4&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="menudefense"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h5&gt;Nom&lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;h5&gt;Emplacement&lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;h5&gt;SD&lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;h5&gt;Effets &lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;h5&gt;Poids &lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;h5&gt;Valeur &lt;/h5&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;fieldset class="repeating_defenses"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;div class="menudefense"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;input type="text" name="attr_armor" placeholder="Nom de la pièce d'armure"&gt;&lt;/input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;select name="attr_emplacement"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="1"&gt;Tête&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="2"&gt;Cape&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="3"&gt;Armure&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="4"&gt;Ceinture&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="5"&gt;Bras&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;option value="6"&gt;Anneau&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;option value="7"&gt;Bottes&lt;/option&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/select&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;input type="number" name="attr_armorscore" class="armorscore" placeholder="score" value="0"&gt;&lt;/input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;input type="text" name="attr_itemeffet" class="itemeffet" placeholder="Description des effets de l'objet"&gt;&lt;/input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="number" name="attr_armorpoids" class="armorscore" placeholder="score" value="0"&gt;&lt;/input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;input type="number" name="attr_armorvaleur" class="armorscore" placeholder="score" value="0"&gt;&lt;/input&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/fieldset&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;/div&gt; And here some of the css i'm using : div.container { &nbsp; &nbsp;display: grid; &nbsp; &nbsp;grid-template-areas: "theme&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; theme" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "presentation&nbsp; &nbsp; presentation" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "combat&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;actives" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "combat &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;defenses" "passives&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defenses" "passives&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; equipement" "macros&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; macros"; grid-template-columns: 45em 60em; width: 115em; &nbsp; &nbsp; &nbsp; &nbsp;column-gap: 1.5em; border: 1pt solid black; font-family : 'EB Garamond' ; } div.defenses { &nbsp; &nbsp;grid-area: defenses; &nbsp; &nbsp;border-style: solid; &nbsp; &nbsp;border-width: thin; &nbsp; &nbsp;padding: 2em; &nbsp; &nbsp;margin: 1em; &nbsp; &nbsp;border-radius: 10px; } div.menudefense{ display:grid; grid-template-columns: 12em 5em 3em 21em 2.5em 2.5em; column-gap: 1em; text-align: center; margin: 1em; } div.menudefense input { width: 12em; } div.menudefense select { width:5em; } div.menudefense input.itemeffet { width: 21em; } .ui-dialog .charsheet .container input[type="number"].armorscore { text-align: center ; } Sorry if that looks like a mess, im a newbie. Here are the complete files if that can help&nbsp; <a href="https://github.com/WAYDims/CustomRoll20.git" rel="nofollow">https://github.com/WAYDims/CustomRoll20.git</a> Thank you for reading me

Can you highlight what you're referring to?

See on the image i posted, on the right there is a big section called "Défenses", my problem is that it has a big empty space on the bottom which takes a lot of space for nothing and I don't know how to reduce it. I tried to fix by defining its height, but when i do so, the repeating section within "Défenses" eventually exceeds outside of the "Défenses" box, so that is not what i want. Because I want this section to fit the content without this space. I think it's due to a bug in my code since other sections do not act that way. I looked for that bug since yesterday and spent hours trying to fix this but i can't find what is wrong. Did I answer your question ? &nbsp;

It's because you are using display: grid. By default items in a grid container stretch to fill their entire grid cell(s). You can change this setting for all items in the container with the place-items, justify-items, and/or align-items properties. Alternatively you can override it for a single element in the container with the -self version of those. CSS grid guide &nbsp;for more details.

Ah, I didn't realise you were referring to that space. Scott is correct, this is CSS Grid "smartly" stretching grid containers to fit an area. I usually fix it by adding align-content: start; to the grid declaration, like .xp-awards { &nbsp; &nbsp; display : grid ; &nbsp; &nbsp; column-gap : 5px ; &nbsp; &nbsp; grid-template-columns : 20px 1fr ; &nbsp; &nbsp; align-content : start ; } But that might not always work. See the other things Scott suggests, and also height: In extreme cases you might have to put an entire column separately (possibly as a grid item) and put grid items in that column. That way they don't try to match the height of the adjacent columns.

Thank you both for your answers. align-self : start applied to the "Défenses" section worked well and aligned the border to fit with the content.&nbsp; Sadly the space is still here, this time between the two sections Ideally I would like this damn space to disappear so my sections can display one after the other, something that would ideally look like this&nbsp; I will try to explore the solutions you gave me but I'm not sure how to proceed. If you have some more advices that would help me a lot ! Thank you for reading

You can also try adding height: fit-content; to the .defenses class. div.defenses { &nbsp;&nbsp; grid-area: defenses; &nbsp;&nbsp; height: fit-content; &nbsp;&nbsp; border-style: solid; &nbsp;&nbsp; border-width: thin; &nbsp;&nbsp; padding: 2em; &nbsp;&nbsp; margin: 1em; &nbsp;&nbsp; border-radius: 10px; }

I have to precise that t he other section "Equipement et Richesses" does'nt move when I tried to use place, align or justify

This is the one limitation of using display grid. There will be breaks in your layout when you have dynamically sized items. Personally it's worth the tradeoff as you can make your sheet responsive to width easily. However, for your specific implementation, you can change your div.container &nbsp;css to be: div.container { display: grid; grid-template-areas: "theme theme" "presentation presentation" "combat actives" "combat defenses" "passives defenses" "passives equipement" "macros macros"; grid-template-columns: 45em 60em; grid-template-rows: auto auto auto auto 1fr auto auto; width: 115em; column-gap: 1.5em; border: 1pt solid black; font-family: 'EB Garamond'; } specifying that the row for the final defenses section is using 1fr will allow it to collapse to the minimum height required and have the excess for the passives section be taken up by the end of passives and the equipment section. If this does not work, move the 1fr and second to last auto for rows, I may be misremembering which one needs to be fr. EDIT: Also, I'd recommend considering fr units for at least one of your columns instead of hard coded widths, this will allow your sheet to be somewhat responsive to whatever width the user sets their character sheet at.

Okay so I used your line to specify the row, and now things are looking really better than they used to be. Thank you very much !