Different height of CSS grid cells [duplicate]

Answer 1

A solution (using CSS only) is by adding another row to your grid-template-areas:

.wrapper {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-areas:
          "aside header header"
          "aside content right"
          "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;

}

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

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

   
   
header
   
aside
   
left
   
content
   
right