Different height of CSS grid cells [duplicate]

Answer 1

Check this

    .wrapper {
      border: 1px solid red;
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-areas:
              "aside header header"
              "left content right";
      grid-gap: 15px;
    }

    .header, .aside, .left, .content, .right {
      border: 1px solid black;
      padding: 10px;
    }

    .header {
      grid-area: header;
      height: 30px; /* in real case it's responsive height */
    }

    .aside {
      grid-area: aside;
      height: 80px; /* in real case it's responsive height */
    }

    .left {
      grid-area: left;
    }

    .content {
      grid-area: content;
      background: yellow;
      float: left;
    }

    .right {
      grid-area: right;
      background: yellow;
      float: right;
    }

    .left, .content, .right {
      height: 100px; /* in real case it's responsive height */
    }

    

       
       

         
aside
         
left
       

       

         
header

         

           
content
           
right