由于在图像下面我有全高的背景图像。问题是里面在另一个网格，网格和它不能伸出。在这里，你可以检查我会重新创建网格布局。通过我不能使用位置绝对https://jsfiddle.net/armakarma/rsLtfhkj/10/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class='main-app'> header with drawer button
<div class='logo'>
logo
</div>
<div class='gallery'>
<div class='gallery-side'> side gallery
</div>
<div class='gallery-background-image'> background image
</div>
</div>
</div>
</body>
</html>
.main-app {
display: grid;
grid-template-columns: 178px 100%;
grid-template-rows: 191px 400px;
background: red;
color:#ffffff;
}
.logo{
width:178px;
height:191px;
grid-column:1/2;
grid-row:1/2;
background:#000000;
color:#ffffff;
}
.gallery{
display:grid;
grid-template-columns: 178px 100% 112px;
background:grey;
grid-column:1/-1;
grid-row:2/-1;
color:#ffffff;
}
.gallery-side{
grid-column:1/2;
grid-row:2/-1;
background:grey;
color:#ffffff;
}
{/*blue div supposed to cover red div . Only black div{logo} has to be left*/}
.gallery-background-image{
grid-column:2/-1;
grid-row:1/-1;
background:blue;
color:#ffffff;
}
使用网格线为基础的位置重叠网地区：
.main-app {
display: grid;
grid-template-columns: 178px 1fr;
grid-template-rows: 191px 1fr;
background: red;
color: #ffffff;
height: 100vh;
}
.logo {
grid-column: 1/2;
grid-row: 1/2;
background: #000000;
color: #ffffff;
}
.gallery-side {
grid-column: 1/2;
grid-row: 2/-1;
background: grey;
color: #ffffff;
}
.gallery-background-image {
grid-column: 2/-1;
grid-row: 1/-1;
background: blue;
color: #ffffff;
}
body {
margin: 0;
}<div class='main-app'>
<div class='logo'>logo</div>
<div class='gallery-side'> side gallery</div>
<div class='gallery-background-image'>background image</div>
</div>