сетка выглядит не так, как я ожидал - PullRequest
Новая
       16

сетка выглядит не так, как я ожидал

0 голосов
/ 10 марта 2020

enter image description here Я тренируюсь с Gird, и я хочу расположить его так, как показано на рисунке. 

.container {
  display: grid;
  grid-template-columns: 72px auto 50px;
  grid-template-rows: 200px auto;
  grid-template-areas: "a a a" "b c c" "d d d";
}

.container div {
  border: 1px solid red
}
<div className="container" class="container">
  <div>header</div>
  <div>left</div>
  <div>right</div>
  <div>footer</div>
</div>

верхний колонтитул будет иметь высоту: 72px, нижний колонтитул будет иметь высоту: 50px, а левая часть имеет ширину: 200px, а часть содержимого имеет ширину: 100% - 200px .

но сейчас это выглядит странно. я что-то пропустил?

1 Ответ

2 голосов
/ 10 марта 2020

Вы определили области сетки, но не указали элементам div, в какой области сетки они должны проживать. 

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: :72px 1fr 50px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "a a a" "b c c" "d d d";
  grid-gap: 1em;
}

.container div {
  border: 1px solid red
}

.header {
  grid-area: a;
}

.left {
  grid-area: b;
}

.content {
  grid-area: c;
}

.footer {
  grid-area: d;
}
<div class="container">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="content">right</div>
  <div class="footer">footer</div>
</div>
...