Different height of CSS grid cells [duplicate]

Answer 1

You could use this sort of thing (margin-top) to move the content and right closer to the header. If this alters the view on mobile and makes it messy you will need to create 2 views depending on device and use different css values for different devices.

.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;
  margin-top: -50px;
}

.right {
  grid-area: right;
  background: yellow;
  margin-top: -50px;
}

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

   
   
header
   
aside
   
left
   
content
   
right