Как добавить сетку на другую сетку? - PullRequest
Новая
       6

Как добавить сетку на другую сетку?

0 голосов
/ 02 февраля 2019

Как на картинке ниже, у меня есть фоновое изображение на полную высоту.Проблема в том, что сетка внутри другой сетки, и она не может вытягиваться.Здесь вы можете проверить, что я воссоздал эту сетку.Я не могу использовать абсолютную позицию 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;
}

1 Ответ

0 голосов
/ 03 февраля 2019

Использование размещения на основе линий сетки для перекрытия областей сетки: 

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