如何在另一个网格上添加网格？答案

【问题标题】：How add grid on another grid?如何在另一个网格上添加网格？
【发布时间】：2019-02-02 17:56:17
【问题描述】：

如下图所示，我有一张全高的背景图片。问题是另一个网格内部的网格不能伸展。在这里您可以查看我重新创建了该网格布局。由于我不能使用绝对位置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;
}

【问题讨论】：

标签： html css grid css-grid

【解决方案1】：

使用基于网格线的放置来重叠网格区域：

.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>

【讨论】：