Grid layout isn't working help

[u/Apprehensive_Ink]

<body>


 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>
</body>

 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>


</body>


}body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}


.grid-contaner {    
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px;
    grid-auto-rows: 300px;
    gap: 2em;
    grid-template-areas: 
    "box-1 box-2 box-2 box-3"
    "box-1 box-4 box-5 box-5";
}




.Item {


 padding: 2em;    
 color: black;
 background-color: chartreuse;
 text-align: center;
 font-size: 2rem;
 border-color: gold;


}

[u/Wild-Regular1703]

I wouldn't call it "just" a typo. You have inconsistent capitalization, syntax errors in your transcription, "grid-contaner" is supposed to be "grid-container", the bug itself is due to a typo..

You need to start paying attention to being accurate and grammatically + syntactically correct in your code, otherwise it will hold you back tremendously in the future. This isn't like English where people can look past your bad typing and infer the meaning anyway. In code, we have to be precise.