Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialjason limmm
8,004 Pointsgrids still not working
.container{
margin:0 auto;
max-width:840px;
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows:repeat(4, 1fr);
grid-gap:10px;
grid-template-areas:
"1 1 1 1"
"2 2 4 5"
"2 2 3 6"
"7 7 8 8";
}
.item{
text-align:center;
background-color:#6488ea;
border-radius: 20px;
padding:4rem;
font-size: 2rem;
color:white;
}
#1{
grid-area:"1";
}
#2{
grid-area:"2";
}
#3{
grid-area:"3";
}
#4{
grid-area:"4";
}
#5{
grid-area:"5";
}
#6{
grid-area:"6";
}
#7{
grid-area:"7";
}
#8{
grid-area:"8";
}
my grids still won't spread out to where i want it to be
1 Answer
Rohald van Merode
Treehouse StaffHey jason limmm 👋
Sorry for the confusion in your previous post, the value you're providing to the grid-area property is still not valid. You'll either want to give it 4 numbers for the grid-lines
you want the element to span. Alternatively, to use them in combination with grid-template-areas as your example, the grid-area property can also be set to a <custom-ident> which acts as a name for the area. As per MDN Documentation:
A
<custom-ident>
must not be placed between single or double quotes as this would be identical to a<string>
. Moreover, the first character must not be a decimal digit, nor a hyphen (-) followed by a decimal digit.
You'll want to change the value for the grid-area
properties to be a valid identifier. Adjusting the stings you're currently using to be letters should fix the issue. Additionally, you might want to have a look at your selectors as I don't think numbers are valid for id
selectors either.
.item-1 {
grid-area: a;
}
I've created this workspace Snapshot for you with a working example of the grid you're after.
Hope this helps!