我使用网格做错了什么

Question

我正在尝试使用网格，并在它的右侧制作一个大盒子和两个不同的但是它们都是乱糟糟的，因为我检查它甚至没有显示我的目标模式。可能有什么不对，因为我认为我宣布一切正确。

我试图使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>

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