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 Flexible Tracks Challenge

Posted by Nikola Najdovski
Nikola Najdovski
18,744 Points

What's wrong with my code?

Set four column tracks using a unit that represents a fraction of the available space inside the grid container. The first track should take up 2 fractions of the space, and the remaining tracks should each take up 1 fraction. /* Complete the challenge by writing CSS below */

.wrapper { display: grid; grid-template-columns: 2fr 1fr 11fr 1fr; }

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

.wrapper {
display: grid;
grid-template-columns: 2fr 1fr 11fr  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>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div> 
      <div>G</div>
      <div>H</div>   
    </div>
  </body>
</html>
Nikola Najdovski
Nikola Najdovski
18,744 Points

I get this comment: Bummer! Are you setting the column tracks correctly? This line should read: grid-template-columns: 2fr 1fr 1fr 1fr;

5 Answers

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points
Dale Severude
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

Hi Nikola,

In your third column you have 11 instead of 1 and in your fourth column you have an extra space. Fix these and your code will work.

Michael Moore
Michael Moore
7,121 Points
Michael Moore
Michael Moore
7,121 Points

I am having trouble understanding this. It says 4 column track, the first taking up 2 fractions and each additional taking up 1 fraction. 2 + 1 + 1 = 4. Why does 2fr 1fr 1fr 1fr pass as the answer?

Dale Severude
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points
Dale Severude
.a{fill-rule:evenodd;}techdegree seal-36
Dale Severude
Full Stack JavaScript Techdegree Graduate 71,350 Points

When it says a 4 column track, the tracks can be any size. So actually it is columns of 2 + 1 + 1 + 1 = 5. The 4 columns have a total width of 5fr in which the first column is twice as wide as the next three.

Houssam Hammouda
seal-mask
.a{fill-rule:evenodd;}techdegree
Houssam Hammouda
Front End Web Development Techdegree Student 7,546 Points
Houssam Hammouda
.a{fill-rule:evenodd;}techdegree
Houssam Hammouda
Front End Web Development Techdegree Student 7,546 Points

Hi my friend the correct Code is :

''' .wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; } '''

Ishmael Phiri
Ishmael Phiri
5,967 Points

i used your coding but im getting an error message " Bummer: Make sure you create a CSS rule for '.container'.

Carlos Muyambo
Carlos Muyambo
6,992 Points
Carlos Muyambo
Carlos Muyambo
6,992 Points

this worked for me

.container{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; }

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

.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; }