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.