使用网格我在做什么错

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>