Sure, try this: HTML <div class="container"> <h3>Attribute</h3> <textarea name="attr_attribute" value=""></textarea> <h3>Fähigkeiten</h3> <textarea name="attr_fahigkeiten" value=""></textarea> <h3>Ausrüstung</h3> <textarea name="attr_ausrustung" value=""></textarea> <h3>Notizen</h3> <textarea name="attr_notizen" value=""></textarea> </div> CSS: div.sheet-container { display: grid; grid-template-columns: 100%; grid-template-rows: 30px 200px 30px 200px 30px 200px 30px 200px; } div.sheet-container textarea { height: calc(100% - 20px); } div.sheet-container h1, div.sheet-container h2, div.sheet-container h3, div.sheet-container h4, div.sheet-container h5 { margin-bottom: 0; } If you want to change the size of any of the boxes, look at this line near the top of the CSS: grid-template-rows : 30px 200px 30px 200px 30px 200px 30px 200px ; Each of the 200px there is setting the height of one of the 4 boxes (in order). So if you wanted to change the height of the first and only the first box, to 50 px (50 pixels), you'd change that to grid-template-rows: 30px 50px 30px 200px 30px 200px 30px 200px; They need to be at least 30px or so to look right (40-ish is safer), but you can fiddle around to find the height for each you want. Dont change the 30px ones- those are setting the height for the headings.