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

Posted by Ignatius S Mudzingwa
Ignatius S Mudzingwa
5,576 Points

Use repeat notation to declare column tracks. The repeat value should be the keyword that collapses any empty tracks and

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 
.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>

4 Answers

colm
colm
13,037 Points
colm
colm
13,037 Points

even though its a late response in case other see this the reason why the code wouldnt be working is that you need to close the brackets after auto-fit, they are placed after the minmax like this:

repeat(auto-fit, minmax(300px, 1fr));

Fradely Dilone
Fradely Dilone
24,037 Points
Fradely Dilone
Fradely Dilone
24,037 Points

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

Fradely Dilone
Fradely Dilone
24,037 Points
Fradely Dilone
Fradely Dilone
24,037 Points

This line should be the following

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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

You're very close but there are a few problems.

First, you need to correctly pass the values to the repeat() function. If you have a space between the parentheses and the repeat keyword, CSS Grid doesn't know you want to use repeat notation.

Secondly, you need to use comma separated values with minmax and the auto-fit keywords.

So something like this will work.

(auto-fit, minmax(300px, 1fr);