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

Posted by Ivelina Ventsislavova Stoilova
Ivelina Ventsislavova Stoilova
4,985 Points

Rewrite the columns track list using repeat notation.

Taks 1 of 1 CSS GRID Layout

What is wrong with my repeat notation code?

Thanks

style.css 
/* Complete the challenge by writing CSS below */

.wrapper {
  display: grid;
  grid-template-rows: 300px;
   grid-template-columns: repeat(3, 1fr) 2fr ;
}
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>

4 Answers

Stefan Djordjevic
Stefan Djordjevic
8,792 Points

grid-template-columns: 2fr repeat(4, 1fr) 2fr;

try this.

Ivelina Ventsislavova Stoilova
Ivelina Ventsislavova Stoilova
4,985 Points
Ivelina Ventsislavova Stoilova
Ivelina Ventsislavova Stoilova
4,985 Points

So, it should be: grid-template-columns: repeat (1, 2fr) repeat (3, 1fr) repeat (2fr) ; ?

Alan Lane
Alan Lane
9,156 Points
Alan Lane
Alan Lane
9,156 Points

Yes, I see it now, the order in which the fr units appears needs to remain intact and in the same position, grouping them together will pull them out of sequence and creates the error.

Adam N
Adam N
70,280 Points
Adam N
Adam N
70,280 Points

I recommend resetting and starting from the beginning. Read below then try again:

grid-template-columns starts out looking like this:

grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;

So that's one instance of 2fr, followed by four instances of 1fr, ending with one instance of 2fr. The property must still retain this structure once you've implemented repeat().

Also, your current code of repeat(3, 1fr) will only make three instances of 1fr.

Let me know if this helps here