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 CSS Grid Layout Flexible Sized Grids Repeat Notation Challenge

Noah White
Noah White
8,534 Points
Posted by Noah White
Noah White
8,534 Points

What am I doing wrong?

I don't understand why it is saying it is wrong plz help

style.css 
/* Complete the challenge by writing CSS below */
.container {
  display: grid;
  grid-template-rows: 200px 300px 100px;
  grid-template-columns: 200px 400px 200px;
  gap: 20px;
}

/* Updated wrapper with repeat notation */
.wrapper {
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 2fr repeat(3, 1fr);
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid Layout</title>
      <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link href="page.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div> 
    </div>
  </body>
</html>

1 Answer

Travis Alstrand
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Treehouse Project Reviewer

Hi there Noah White 👋

I see three small issues here.

  1. I'm not sure where all that .container code came from, possibly an older challenge, but we should remove that.

  2. In the original code the challenge provides, there's actually 4 1frs and you're currently repeating 3.

  3. There is another 2fr at the end of the original code too.

After removing the .container code, and making these adjustments, this should be the entirety of the CSS file.

/* Updated wrapper with repeat notation */
.wrapper {
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 2fr repeat(4, 1fr) 2fr;
}