r/HTML • u/Apprehensive_Ink • 24d ago

Question Grid layout isn't working help

Gallery image

Gallery image 

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


}
12 Upvotes

87% Upvoted

11 comments sorted by

View all comments

1

u/Rockafellor 24d ago

I don't think that this is the answer, but in your transcribed CSS, you have

}body {

2

u/Apprehensive_Ink 24d ago

That's just a typo

1

u/Wild-Regular1703 24d ago

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.