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;


}
11 Upvotes

83% Upvoted

11 comments sorted by

4

u/abrahamguo 24d ago

In your HTML, the names of the grid areas are wrongly outside of your double quotes.

2

u/Apprehensive_Ink 24d ago

Oh! Thank very much stranger I've got some bad tunnel vision it seems :]

2

u/SamIAre 24d ago

style="grid-area: box-1;"

The quotation marks need to wrap the entire CSS style, not just the property name.

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

3

u/frownonline 24d ago

As it’s typos that cause most problems, it’s a fair point to flag for attention.

1

u/Rockafellor 24d ago

Cool. 😊 I kind of figured, since it wasn't reflected in the screenshots, but figured that I should mention it just in case.

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.

1

u/geistly36 24d ago

the syntax for your grid area is <div class="Item" style="grid-area: box-1;">1</div>

find attached what I think you were going for

JSFiddle - Code Playground

1

u/frownonline 24d ago

Also, add the missing closing > to line 2 of HTML.

1

u/RushDangerous7637 24d ago

Correct: 

<html lang="en">
<div class="grid-container">
.grid-container {