Divs не охватывает по вертикали, используя CSS Grid - PullRequest
Новая
       5

Divs не охватывает по вертикали, используя CSS Grid

2 голосов
/ 25 мая 2020

Я пытаюсь сделать простой макет, пока учусь CSS Сетка.

Макет должен быть следующим:
«header header header»
«adv content content»
«adv footer footer»

Я получаю следующее:
"header header header"
"adv content content"
". Footer footer"

Div "adv "никогда не занимает вертикальное пространство, не имеет значения, использую ли я это, используя области шаблона, как указано выше, или использую строку сетки и столбцы, как приведенный ниже код. Фактически, я не могу управлять ни одним из моих div по вертикали. Я не могу растянуть их на несколько рядов. Может кто-нибудь подскажет, что я делаю не так? 

body {
  background: dimgray;
}

div {
  height: 200px;
  font-size: 50px;
  font-family: sans-serif;
  color: floralwhite;
}

.header {
  background-color: lightcoral;
  grid-column: 1 / 4;
}


/*Div having the issue below*/

.adv {
  background-color: blue;
  grid-row: 2/4;
  /*Expecting to span from row 2 to 4, but not happening.*/
}


/*Div having the issue above*/

.content {
  background: pink;
  grid-column: 2/4;
}

.footer {
  background-color: salmon;
  grid-column: 2/4;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
<body>
  <div class="container">

    <div class="header">header
    </div>

    <div class="adv">adv
      <!--Div with the issue-->
    </div>

    <div class="content">content
    </div>

    <div class="footer">footer</div>



  </div>
</body>

Ответы [ 3 ]

1 голос
/ 26 мая 2020

Вы установили одинаковую высоту всех div. Это, конечно, означает, что adv не может быть размером с два div. Так что попробуйте это, если вам все еще нужна минимальная высота для всех div (или просто удалите высоту все вместе): 

div {
      min-height: 200px; /* min/max-height is preferred to `height` for flexible layouts like grid and flex-box. */
      font-size: 50px;
      font-family: sans-serif;
      color: floralwhite;
    }


body {
  background: dimgray;
}

div {
  min-height: 200px; /* height means that all divs will be the same hieght which prevents the layout you want. Min-height is more correct here. */
  font-size: 50px;
  font-family: sans-serif;
  color: floralwhite;
}

.header {
  background-color: lightcoral;
  grid-column: 1 / 4;
}


/*Div having the issue below*/

.adv {
  background-color: blue;
  grid-row: 2/4;
  /*Expecting to span from row 2 to 4, but not happening.*/
}


/*Div having the issue above*/

.content {
  background: pink;
  grid-column: 2/4;
}

.footer {
  background-color: salmon;
  grid-column: 2/4;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
<body>
  <div class="container">

    <div class="header">header
    </div>

    <div class="adv">adv
      <!--Div with the issue-->
    </div>

    <div class="content">content
    </div>

    <div class="footer">footer</div>



  </div>
</body>
1 голос
/ 29 мая 2020

Ваша сетка в порядке, проблема с: div {height: 200}, удалите высоту, и она будет работать должным образом.

0 голосов
/ 25 мая 2020

попробуйте: 

div.container {
    display: grid;
    grid-template-areas: 'h h h' 'a c c' 'a f f';
}
.header { grid-area: h; }

...

столбцы и строки шаблонов могут рисовать только простые таблицы.

область шаблона позволяет настраивать отображение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...