gridgarden
gridgarden copied to clipboard
thomaspark
Level 26. Making 5 rows.
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:
You almost have the solution except you've left 40px of space up top instead of 50px.
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.
Why is this solution not accepted?
grid-template-rows: 50px 1fr 1fr 1fr 100%;
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!
it has to be an error because it says the water should only fill the 5th row
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;
@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
@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.
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
However, 1fr is not even needed at the end. It is solved with:
grid-template-rows: repeat(4, 12.5px);
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
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;
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:
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.
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!
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;
:))
Here's the best possible answer:
grid-template-rows: repeat(3, 10px) 20px 1fr;
