我在使用网格做错了什么答案

【问题标题】：What am i doing wrong using grid我在使用网格做错了什么
【发布时间】：2018-03-07 00:07:30
【问题描述】：

我正在尝试使用网格并在其右侧制作一个大盒子和两个不同的盒子，但它都被打乱了，当我检查它时，它甚至没有显示出我想要的图案。有什么可能是错的，因为我认为我宣布一切都是正确的。

我试图让 3 列和 2 行用 2 列 2 行主框和右侧填充它们，以每行占据第三列 1 个不同的小框。但相反，当我检查它时，我得到 5 列和 2 行 -.-

.top-container {
    display: grid;
    grid-template-areas: 
    "main-box main-box small-box-a"
    "main-box main-box small-box-b";
    grid-template-columns: 200px 50px;
    grid-template-rows: 300px 50px;
}

.main-box {
    grid-area: main-box;
    min-height: 300px;
    background-color: green;
}

.small-box-a {
    grid-area: small-box-a;
}

.small-box-b {
    grid-area: big-box-b;

}

<div class="top-container">
  <div class="main-box"> This is a big box </div>
  <div class="small-box-a"> This is a small box A</div>
  <div class="small-box-b"> This is a small box B</div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

你打错字了..

.small-box-b {
    grid-area: big-box-b;

}

应该是

.small-box-b {
    grid-area: small-box-b;

}

.top-container {
  display: grid;
  grid-template-areas: 
  "main-box main-box small-box-a" 
  "main-box main-box small-box-b";
  grid-template-columns: 200px 50px;
  grid-template-rows: 300px 50px;
}

.main-box {
  grid-area: main-box;
  min-height: 300px;
  background-color: green;
}

.small-box-a {
  grid-area: small-box-a;
}

.small-box-b {
  grid-area: small-box-b;
}

<div class="top-container">
  <div class="main-box"> This is a big box </div>
  <div class="small-box-a"> This is a small box A</div>
  <div class="small-box-b"> This is a small box B</div>
</div>

【讨论】：

有时候我觉得自己很笨。感谢您的宝贵时间。