I try to train and I like It! Cool. But... Sorry. I don't understand 21-st level. Maybe It can be explained more intelligibly. Thanks about gridgarden

[burnoutberni]

m)
I had problems with this level as well, because I tried variations of grid-template-columns: 50px fr fr fr 50px; but nothing seemed to work. Thanks for the clarification here.

[hmaesta]

I was stuck here either.

The instructions are:

Use fr to make three columns that take up the leftover space in between.

So I thought that the grid should have the total of three columns (50px 1fr 50px), not five (50px 1fr 1fr 1fr 50px).

[jensenak]

I think the wording just needs to be updated to describe the way that the fr unit works. Something like:

"Another unit that grid introduces is the fractional unit fr. Each fr unit allocates one share of the remaining space. For example, if two elements use 1fr and 3fr respectively, the space is divided into 4 equal shares. The first element will occupy 1/4 of the space and the second element will take 3/4."

You have to create two 50px columns on the left and right and between them 3 columns with 1fr value, it means that the rest of unused space will be divided equally to those 3 columns.
Solution: grid-template-columns: 50px 1fr 1fr 1fr 50px;
Try to change values to 50px 3fr 2fr 1fr 50px; to see how fr value works. More info you will find at gridbyexample.com/video/

[4ront]

Oh, thanks. I see. Something like the flex property. Ok, let's continue levels

[OwenMelbz]

Must add, I was breezing through happily until 21 as well, then I was jut completely confused what was expected, maybe an example was needed or to be explained first! apart from that been great :)

[4ront]

OwenMelbz, I think that these learning games should not explain subtlety of implementations. There are w3c and MDN specifications for this purpose. It will be more useful that people themselves explore and dive into the subject. But tasks must be more clear and understandable for novices!

[codelinde]

I admit I got stuck for a moment myself, but figured it out after 1 Google search. Maybe not such a bad thing to require this type of outside exploration.

[caramiame]

same here = css tricks, smashing, and other solutions did not work after trying things listed above - i finally came over here to see if I was alone with this issue, lol. Also, of the various things tried, the visual layout of the attempts in error was the same as the solution provided here.

[thomaspark]

Awesome discussion. I'll be beefing up this level's explanations using @jensenak's wording, and adding a couple new levels to explore the concept of fr further.