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 Auto-generate Flexible Columns

Alexandra Velez
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points
Posted by Alexandra Velez
.a{fill-rule:evenodd;}techdegree
Alexandra Velez
Front End Web Development Techdegree Student 9,313 Points

Why is the repeat property not being accepted during this challenge?

Error Message Reads: Bummer: Make sure you're using the shortcut for repeating tracks.

It seems like everything is correct in the syntax.

Why does the error message say that the repeat property isn't being used correctly?

The challenge says: Use repeat notation to declare column tracks. The repeat value should be the keyword that collapses any empty tracks and auto-generates columns to fit the available space. Then, set the track sizes using the function that sets a track's minimum and maximum size. The min size should be 300px, and the max size should be 1 fraction of the available space.

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

.grid {
  display: grid;
  grid-template-columns: repeat (auto-fit, minmax (300px, 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="grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div> 
    </div>
  </body>
</html>

2 Answers

unknown member
PLUS
unknown member
Courses Plus Student 18,949 Points
unknown member
unknown member
Courses Plus Student 18,949 Points

Remove space after repeat and minmax and you're good to go.

Rawan Arnoub
Rawan Arnoub
14,848 Points
Rawan Arnoub
Rawan Arnoub
14,848 Points

.grid { display: grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));

}