网格布局看起来不像我预期的那样>>

Question

我正在围网练习，我想按图片所示对其进行布局。

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

页眉将为height：72px，页脚将为height：50px，左侧部分的宽度为200px，内容部分的宽度为100％-200px。

但是现在看起来很奇怪。我错过了什么吗？

我正在围网练习，我想按图片所示进行布局。 .container {display：grid; grid-template-columns：72px自动50px; grid-template-rows：200px auto; grid -...

Answer 1

您已经定义了网格区域，但是您没有告诉div他们应该居住在哪个网格区域。