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 trial

CSS

jason limmm
jason limmm
7,581 Points
Posted by jason limmm
jason limmm
7,581 Points

grids 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey 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!