Level 26. Making 5 rows.

[asaltenis]

The challange description says, that I should make 5 rows using grid-template-rows.

grid-template-rows works much the same as grid-template-columns.

Use grid-template-rows to water all but the top 50 pixels of your garden. Note that the water is set to fill only your 5th row, so you'll need to create 5 rows in total.

I made it, but it doesn't work. Here is my line of code:
grid-template-rows: repeat(4, 10px) 1fr;

And it shows, how, I think, it should look like:

[thomaspark]

You almost have the solution except you've left 40px of space up top instead of 50px.

[DarrellBrogdon]

This issue highlights the needs for hints in the game. I couldn't figure out the answer to this level either until I found this issue.

[yofriadi]

repeat(4, 12.5px) 1fr;
thank me later

[SpyrosKo]

You could also do:
grid-template-rows: 12.5px 12.5px 12.5px 12.5px;

[cnscorpions]

grid-template-rows: 50px 0 0 0; works

[koenknol]

Why is this solution not accepted?

 grid-template-rows: 50px 1fr 1fr 1fr 100%;

[JoeRoddy]

I kind of agree that this one was a bit vague. I solved it with
grid-template-rows: 50px 0 0 0 100%;
but it wasn't accepted.

Awesome project by the way, thanks for making this Thomas!

[korenes]

it has to be an error because it says the water should only fill the 5th row

[artlili]

grid-template-rows: 50px 0 0 0 1fr;

[jothamardel]

I don't understand after spending hours trying to find a solution, I came up with this:
grid-template-rows: repeat(2, 0%)25px 25px;

[rabindranathforcast]

@yofriadi how you get that? did you make some calculation? any explain? o just testing the mesure?

repeat(4, 12.5px) 1fr;
thank me later

[cazroam]

@rabindranathforcast

4 x 12.5px = 50px (takes care of the 50px gap at the top and uses 4 rows)
1fr (fills the rest of the space and uses 1 row)
--> the above equates to 5 rows.

I was stuck too on this one. The explanation is a bit cryptic but now I see the solution, it's clearer.

[herzorf]

this is my ansower: grid-template-rows: repeat(4,12.5px) 1fr;

[kumar-vipin]

This can be handled with various combinations
This is my answer:
grid-template-rows: 20px repeat(3, 10px) 1fr;
20px for first row + 10px for next 3 row = 50 px for 1st four rows
1fr will take remaining space

[haroldao]

repeat(4, 12.5px) 1fr;
thank me later

Thanks :)

[ValiNicula]

Mine was : grid-template-rows: 50px 0 0 0 :)

[interglobalmedia]

However, 1fr is not even needed at the end. It is solved with:

grid-template-rows: repeat(4, 12.5px);

[juanluischaurant]

I think the difficulty lies here:

you'll need to create 5 rows in total.

One must interpret the question properly (5 rows are needed). Then the answer is straightforward.

50px 0 0 0 1fr

Which means:

1st column: 50px
2nd: 0px
3rd: 0px
4th: 0px
5th: 1fr (take all the remaining space)

The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same column

[BorisGaliano]

the answer is grid-template-rows:repeat(4, 12.5px) 1fr

[Klemart3D]

Also: grid-template-rows: 50px repeat(3, 0) 1fr;

[perman03]

I just did this exercise and ran into the same problem. I came here and found the solution.
grid-template-rows: repeat(4, 12.5px) 1fr;
It is very strange, because supposedly it is as they say in another comment. But I also accept this. (?
grid-template-rows: 12.5px 12.5px 12.5px 12.5px;

[Umang-Vadadoriya]

The challange description says, that I should make 5 rows using grid-template-rows.

grid-template-rows works much the same as grid-template-columns.
Use grid-template-rows to water all but the top 50 pixels of your garden. Note that the water is set to fill only your 5th row, so you'll need to create 5 rows in total.

I made it, but it doesn't work. Here is my line of code: grid-template-rows: repeat(4, 10px) 1fr;

And it shows, how, I think, it should look like:

[MatataLeon]

my answer --- grid-template-rows: 50px repeat(3, 0) auto;

[Alhajideen]

grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;
This also works

[jdx-code]

This also works grid-template-rows: 50px 0 0 0;

[jdx-code]

I think the difficulty lies here:

you'll need to create 5 rows in total.

One must interpret the question properly (5 rows are needed). Then the answer is straightforward.

50px 0 0 0 1fr

Which means:

1st column: 50px 2nd: 0px 3rd: 0px 4th: 0px 5th: 1fr (take all the remaining space)

The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same column

It's a great answer. but I noticed it also works without the 1fr in the end.

[juanluischaurant]

I think the difficulty lies here:
you'll need to create 5 rows in total.
One must interpret the question properly (5 rows are needed). Then the answer is straightforward.
50px 0 0 0 1fr
Which means:
1st column: 50px 2nd: 0px 3rd: 0px 4th: 0px 5th: 1fr (take all the remaining space)
The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same column

It's a great answer. but I noticed it also works without the 1fr in the end.

Great catch!

[watarikai96]

grid-template-rows: 50px repeat(3, 0px);

[Thaleia]

There need to be 5 rows - this is defacto.

So, the first "area" is to be of 50px.

The last area will be 1fr to water the whole carrot row length.

The first unwatered 50px can be done in various ways, as long as it takes 4 rows of any size, since it excludes the last area of 1fr as mentioned above.

Solution:
grid-template-rows: repeat(2, 0%) 25px 25px 1fr;
grid-template-rows: repeat(2, 0px) repeat(2, 25px) 1fr;

:))

[AbhishekAnand2]

Here's the best possible answer:

grid-template-rows: repeat(3, 10px) 20px 1fr;

[finsoncoutinho]

Here's mine:
grid-template-rows:50px 0px 0px 0px 1fr ;

[juanluischaurant]

Here's mine: grid-template-rows:50px 0px 0px 0px 1fr ;

Just replaced 0px 0px 0px with repeat(3, 0px). Great solution!

[Vipin-V]

grid-template-rows: 50px repeat(3, 0);

[viveklearning]

The challange description says, that I should make 5 rows using grid-template-rows.

grid-template-rows works much the same as grid-template-columns.
Use grid-template-rows to water all but the top 50 pixels of your garden. Note that the water is set to fill only your 5th row, so you'll need to create 5 rows in total.

I made it, but it doesn't work. Here is my line of code: grid-template-rows: repeat(4, 10px) 1fr;

And it shows, how, I think, it should look like:

grid-template-rows: repeat(4,12.5px) 1fr;

[0xLida00]

The challange description says, that I should make 5 rows using grid-template-rows.

grid-template-rows works much the same as grid-template-columns.
Use grid-template-rows to water all but the top 50 pixels of your garden. Note that the water is set to fill only your 5th row, so you'll need to create 5 rows in total.

I made it, but it doesn't work. Here is my line of code: grid-template-rows: repeat(4, 10px) 1fr;

And it shows, how, I think, it should look like:

Useful Thread - solved it with:
grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;

[PuertoPounder]

repeat(4, 12.5px) 1fr; thank me later

Thanks for the help. Was having trouble with this one.