u/Apprehensive_Ink

&lt;body&gt;


 &lt;div class="grid-contaner"&gt;
   &lt;div class="Item"style="grid-area":box-1&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-2&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-3&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-4&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-5&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;

 &lt;div class="grid-contaner"&gt;
   &lt;div class="Item"style="grid-area":box-1&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-2&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-3&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-4&gt;&lt;/div&gt;
   &lt;div class="Item"style="grid-area":box-5&gt;&lt;/div&gt;
 &lt;/div&gt;


&lt;/body&gt;


}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;


}
Grid layout isn't working help
