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 The Solution

Claudia Restrepo
Claudia Restrepo
9,888 Points
Posted by Claudia Restrepo
Claudia Restrepo
9,888 Points

Following the logic the layout get distorted

Hello, I did exactly what is explained in the less, but when I set the grid-areas the layout is completely distorted.

I don't know why does that happens.:

This is my code:

header {
  grid-area: header;
}

 main {
  grid-area: main;
}

.about {
  grid-area:  about;
 }

.news {
  grid-area:  news;
}

.links {
  grid-area: links;
}

.ads {
  grid-area: ads;
}

footer {
  grid-area: footer;
}
.grid {
  height: 100vh;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-gap: 10px;
  grid-template-areas:
    "header header header"
    "main about news"
    "main links ads"
    "main main footer";
}
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Added code formatting

1 Answer

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

It looks like you need to make the last row "main footer footer" rather than "main main footer". You're also missing a semicolon and a closing curly bracket, but maybe that part just didn't get pasted in. If that doesn't help, would you be able to post a formatted copy of your code using the Markdown Cheatsheet? Let me know if you're still having trouble!

Thai Truong
Thai Truong
5,793 Points

I agree with Gabbie. On your last code it should be "main footer footer". Once you make the change, your layout will be fixed.