html - 使用网格我在做什么错

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

我正在尝试使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>

最佳答案

你有错字

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