Level 26 is difficult to understand about gridgarden

[realtebo]

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.

1. You know that you must create 5 rows
2. you know that rows 1 to 4 must NOT be covered with water
3. you know that rows 1 to 4 in total are 50 px

so

4. from point 3 you understand that rows 1, 2, 3, and 4 must height in total px, so every rows must be 12.5px height
5. the fifth rows must me simple height the rest of available space, that you can set using 1fr

So the problem here is understanding the problem. It taken 30mins for my mind to resolve it. 🥇

[lyonsun]

I was also stuck at level 26, @realtebo had a good explanation.

For me, the following answer:

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

is much easier to understand than the shrunk one in the screenshot:

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

[robertpenner]

https://twitter.com/miklb/status/850759537665732610

[esitarz]

I thought this one was goofy as well.
In case it's easier for you to approach from a different perspective, here is what I used to advance:

grid-template-rows: repeat(4, 1fr) calc(100% - 50px);

[Joru-chan]

I do agree that the phrasing is odd and I got around to it by doing grid-template-rows: repeat(4, 12.5px). It was tough to "get" that the water was only on the last row and that you needed to make mini rows before that. A simple tip to just look at the rest of the code before proceeding would help because that's when it clicked for me (when i saw the #water {
grid-column: 1 / 6;
grid-row: 5 / 6;
})

[robertpenner]

Oh, other people struggling with level 26 ended up making zero-height rows, which wasn't a concept previously introduced:
#23

[jogavidia]

It's not clear

[robdll]

same here. Went flowless to levele 26 and got stuck for half an hour.

[m-nathani]

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

This solution worked for us.. however, it stopped me for moving forward, since the button was disabled..

So to enable it, open dev tools, inspect the button and remove disabled attribute and move forward. 😂

[josecalvano1546]

Considero que en este momento se hace referencia a lo que se conoce en css grid como "implicit grid " and "Explicit Grid".
Reference:
https://www.quackit.com/css/grid/tutorial/explicit_vs_implicit_grid.cfm
img:

[youarebju]

grid-template-rows: 50px 0 0 0 1fr; or
grid-template-rows: 0 0 0 50px 1fr;
looks good~

[bakerlisa]

Thank you for this. I did not get what they were asking me to do.

[robertpenner]

Some people stumped by the math in level 26:
#66

[Linxeyes]

Finger in the nose for all exercises, but where i was at level 26, ...!

Stuck about 1hour, i also looked the code source if there is the code anywhere, and watched videos about grid-template-rows for nothing ^^'.
And i found here some results ... But i'm very frustred because i don't really understood the thing ._. i watched some video, that was simple in that, but not with exercise of grid garden ><.

In fact, i tried to make only 2rows with the first to 50px and second row lef-over, but i think it wasn't possible with
#water {
grid-column: 1 / 6;
grid-row: 5 / 6;
}
and i don't find an other way... Maybe the sequence was not enough clear for the work to do..?

So i wasn't alone to be stuck, i'm salve ^^.

[razvanstroici]

My simple answer was this:
grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;

What can easily turn into this:
grid-template-rows: repeat(4, 12.5px) 1fr;

I don't think this answer ( grid-template-rows: repeat (4, 12.5px); ) is correct.
Simply because it creates 8 rows and we only need to create 5 rows.
https://prnt.sc/soqu9m

[hanzlahabib]

After 5 years, it is still a riddle,

[9nikolov]

MOST IMPORTANT SENTENCE IN THE LEVEL:
water is set to fill only your 5th row

It's not the exercise that is hard, its the way the question is formulated. You really have to pay more attention while reading it.

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.

[wangk29]

I thought this one was goofy as well.
In case it's easier for you to approach from a different perspective, here is what I used to advance:

grid-template-rows: repeat(4, 1fr) calc(100% - 50px);

Thank you this one made sense for me!

[grungydan]

Agree, this one is extremely obtuse. I find it a bit to "this is tricky" and not very "this is useful." What possible layout concept does this help to illustrate?

[anpel]

Found this by googling the solution to 26. Maybe a button that shows you the answer after a couple of failed attempts would help.

[kzsa]

The Hungarian version is a bit trickier :D

"Használd a grid-template-rows kódot, hogy megöntözd a felső 50 pixel magas részt a kertednek."
So in Hungarian we should be watering the upper 50px part.
(level 26)

Anyway ... I like this game!

Thanks to Balázs Tóth for the confirmation!
Br: Zsolt

[ElijahLynn]

A simple tip to just look at the rest of the code before proceeding would help because that's when it clicked for me (when i saw the #water {
grid-column: 1 / 6;
grid-row: 5 / 6;
})

This is key, I wasn't looking at the rest of the code. Once I look at the code it all makes sense. This tip is key and should be added to the instruction text.

[nataliecardot]

You can figure out how to do it from the provided info if you read it very carefully, but it doesn't make intuitive sense to divide up the 50px empty area into a bunch of rows (whereas reasoning of where to split up columns/rows was understandable in the previous levels) - why would an empty area be split up if the goal is to water the area with plants?

[mcloughman]

I think the best way to grasp it is to see that your only watering from the 5th row gridline to the 6th row gridline. Your water grid-row is unchangeable.
So you know that somehow you need to make 4 rows that won't be watered...and then water the rest. And you also know that that the total height of the four rows that won't be watered is 50px. I think to really visualize what is happening is to use
grid-row-templates: repeat(4, 12.5px) 1fr
-- even though you'll still get credited if you don't add the 1fr on the end, it helps greatly to have it because it really shows the true new grid-row-template that you created

[Joakoq12]

I was so close ! I was stuck in repeat(4, 13px) lmao

[ceddddy]

Number 26 convinced me that I'm a bit slow. What a question !!!!

[juanluischaurant]

This is the correct answer, from previous questions we've been hinted that the empty space at the top height is 50px. We're told that water is only on the 5th row.

So, what I did was:

1. Divide 50px/4.
2. then repeat(4, 12.5px), which will distribute the 50px between 4 rows for marking the 50px empty space
3. take the remaining space with 1fr

[nadieenespecial]

I didnt get it :/

[lekmao]

@lyonsun Your last answer grid-template-rows: repeat(4, 12.5px); is the best so far. Makes a lot of sense now seeing it work! Thanks!

[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;

[Lacruzf]

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

[MDutro]

I have really enjoyed this tutorial and Flex Froggy too. Thank you for creating it!

I would echo others in this thread and say that I had some trouble with this question too. Also the app does not accept my initial solution:

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

Visually, this appears to solve the problem, i.e. all carrots are watered. Granted some of the other rows are essentially invisible but that did not appear to be a constraint at first.

Also, the wording lead me to believe that the first row was required to be 50px itself, hence me making 3 tiny ones.

I hope this criticism is taken in the constructive light in which it is meant. Thank you again for creating a fun way to learn some tricky CSS concepts for a beginner like me!

[AurionVII]

I have really enjoyed this tutorial and Flex Froggy too. Thank you for creating it!

I would echo others in this thread and say that I had some trouble with this question too. Also the app does not accept my initial solution:

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

I've found why your solution doesn't work when you try it. You had three lines of 1px so its become 3px. You just need to remove three to fifty for it to work. ;)
Here's your solution without the issue:

grid-template-rows: 47px 1px 1px 1px; or grid-template-rows: 47px 1px 1px 1px 1fr;

[gulzaryousaf]

I thought this one was goofy as well.
In case it's easier for you to approach from a different perspective, here is what I used to advance:

grid-template-rows: repeat(4, 1fr) calc(100% - 50px);

I would like to stick with this solution because he said in the note that the water is set to fill only your 5th row, so you'll need to create 5 rows in total.

This one is also good grid-template-rows: repeat(4,12.5px) 1fr;

[0Phenix0]

I have really enjoyed this tutorial and Flex Froggy too. Thank you for creating it!

I would echo others in this thread and say that I had some trouble with this question too. Also the app does not accept my initial solution:

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

Visually, this appears to solve the problem, i.e. all carrots are watered. Granted some of the other rows are essentially invisible but that did not appear to be a constraint at first.

Also, the wording lead me to believe that the first row was required to be 50px itself, hence me making 3 tiny ones.

I hope this criticism is taken in the constructive light in which it is meant. Thank you again for creating a fun way to learn some tricky CSS concepts for a beginner like

This solution may be visually correct, but 50+1+1+1 gives 53px, and it's more than the 50px they asked for; you could try 47 1 1 1 to add up to 50 but yet, the solutions above your comment are the best.
ps: Don't change the exercise, it helped us understand more about CSS grid, I'm sure that the 25 exercises before this one were so easy and straightforward, hens, we will not really recall the solutions when designing a layout.
keep up guys I really appreciate what you are doing, thanks!

[cbunch289]

I ended up only creating four rows and it accepted the answer as valid. Obviously this part of the exercise demands attention.

[PremanandChowdhury]

After learning different solutions, i figured the main purpose of this problem.

Now, the question:

It says to water all, except the 50px of the garden from the top.
Also the no. of rows should be 5.

Meaning :

The last row should span excluding 50px from the start of the garden, to the end of the garden.
The top 50px will become the 4 rows with size ( 50px / 4 = 12.5px each).

code :

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

Explanation:

repeat(4, 12.5px) : creates the 4 rows inside the top 50px area.
1fr : spans the last row to the end.

[JuandaGarcia]

Bug 😁

[katsuya245126]

Bug

@JuandaGarcia
Your first 4 rows only add up to 40px whereas it's supposed to add up to 50.

This problem was poorly worded tbh. Once I understood what I was actually supposed to do, it was pretty easy

[gersonmontenegro]

I don't really get why if I separated the spaces, the water doesn't reach the space

[katsuya245126]

I don't really get why if I separated the spaces, the water doesn't reach the space

Check the bottom code for #water. It says to water column lines 1-6 and row lines 5-6. But your code has only three row lines like so:

|--50px--|------------------1 fr--------------------|
1--------2-----------------------------------------3

[neahpanilag]

it's rather odd i easily solved 27 through 28 but not 26. thought i was the only one having difficulty with the phrasing of the instruction.

[famingyuan]

1. water all but the top 50 pixels
2. 5 rows in total
3. water is set to fill only your 5th row.

I can't make it before i see the answer. I am stupid.

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

[Myline1991]

I find myself stuck at this level, I have finally found a solution who appears to work but not accepted :(

[kzsa]

:D a cool representation of the grid system! I also showed it to my kids. They love it too, thank you very much! I teach them mathematics, physics, electrical engineering in a similar approach, I think everything should be taught this way.

grid-template-rows: repeat(4,calc(50px/4)) 1fr

It took me a while too, because the Hungarian translation is wrong. According to that, the top 50 pixels should be watered, but that makes no sense because of the beets. :D

"Használd a grid-template-rows kódot, hogy megöntözd a felső 50 pixel magas részt a kertednek."

means:

"Use the grid-template-rows code to water the top 50 pixels high part of your garden." :D

[thomaspark]

Hey @kzsa, thanks for sharing your thoughts.

@pehsa, are you available to take another pass at the Hungarian translation?

[kzsa]

Hi Thomas, There are minor inaccuracies in the Hungarian translation, but the one mentioned was the roughest. The other mistakes are funny rather than serious. Overall, the task could be understood. Learning is very enjoyable with this software. Congratulations. We love it! :D Minor inaccuracy for example: the beets / carrot (or whatever) are "grown" in Hungarian to and electricity / products / etc. will be "produced" ... etc. We are using consensus-based translation for FOSS. This method is safer, faster and cheaper (in terms of leisure). In one word, it is much more effective. (You don't need to be a "master of the languages" and the code speaks for itself, etc.) I'm working now, I can review it later. I will help you if i can. My primary language is Hungarian, my secondary language is German, and English is my third language. Br: Zsolt András Kovács Thomas Park <[email protected]> ezt írta (időpont: 2021. jan. 10., V, 19:54):

…

Hey @kzsa <https://github.com/kzsa>, thanks for sharing your thoughts. @pehsa <https://github.com/pehsa>, are you available to take another pass at the Hungarian translation? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#73 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AODJG7EEJIHKUMVCI2CMI6TSZHZXPANCNFSM4EYKETQQ> .

[thomaspark]

Hey Zsolt, that sounds good, any help on the translation is appreciated!

[BlasToth]

The Hungarian version is a bit trickier :D

"Használd a grid-template-rows kódot, hogy megöntözd a felső 50 pixel magas részt a kertednek."
So in Hungarian we should be watering the upper 50px part.
(level 26)

Anyway ... I like this game!

[AhmadDalao]

my solution was :
grid-template-rows: auto auto auto 50px 1fr;
and it worked for me.

[agraham75]

Can someone explain why this solution worked?

[zhangjun620]

my answer is : 50px repeat(3,0);
but i dont know why (3,0) is valid

[aliihsansenel]

grid-template-rows: repeat(4, calc(50px/4)) 1fr; also works but
grid-template-rows: 50px auto auto auto 1fr; and grid-template-rows: 50px 0 0 0 1fr; seem more sophisticated.

[mnbroatch]

I agree that this level is too clever. It made me think, "Oh, I didn't realize it was that kind of puzzle game", in a bad way.

[ArnasLuksas]

Got the answer from here, but still i don't understand..

[kzsa]

Got the answer from here, but still i don't understand..

Hi Arnas,
To understand how it really works, I suggest you review the following resources:

Rachel Andrew - https://rachelandrew.co.uk/
https://gridbyexample.com/

Jen Simmons - https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Una Kravets - https://1linelayouts.glitch.me/

Br: Zsolt

[Freddymhs]

working with : 50px 0 0 0;

[yonhung]

grid-template-rows: 50px 0 0 0 1fr; and grid-template-rows: 50px auto auto auto 1fr; are easier to understand.
0 0 0means that there are three rows, but they all have a height of 0.
auto auto auto means that there are three rows. Their height depends on the content inside.

[Dmytro2V]

It's easy to understand few popular solutions, with 0 high rows or with 4 * 12.5px.
It's more or less understandable why 50px - 100% not working (100% overlapping 50 px despite it is not visible).
But what is hard - why we have additional autogreed rows instead of an empty space in 50 px 4 * 0 or 4 * 12,5 (without 1fr at the end) solutions.
Is it a bug, or a normal way?

[zhefciad]

grid-template-rows: 50px repeat(3, 1fr) 3643fr;
is what I came up with. Seems oddly incorrect, but hey it works :D

[narayan-raghuwanshi]

There can be multiple ways to think:

1. grid-template-rows: 50px 0px 0px 0px 1fr;
2. grid-template-rows: 0px 50px 0px 0px 1fr;
3. grid-template-rows: 0px 0px 50px 0px 1fr;
4. grid-template-rows: 0px 0px 0px 50px 1fr;

[SCORPSTREAM]

ohh no, I am reading all your solutions, but I came up with so weird solution: 1fr 1fr 1fr 1fr 70fr (((

[ileadu]

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

grid-template-rows : 50px repeat(3, 0px) 1fr; should be the same.

Total newbie in the scene, but i finally understood the [repeat(4, 12.5px) 1fr;] simply by understanding that the water is ON the fifth row while the sixth is the -bottom- like it would be the container border (which is empty).

So to "pull" the water up, we need to "compress" the others 4 behind.

To do so, you know that the "first" line/blank-space is 50px in height.
Then you go and put <1fr 1fr 1fr 1fr 1fr> to check where the last one is the FIFTH row having water "inside".

So we keep this last 1fr and for the others 4 we take them in the formula above that means: repeat 4 times the 1fr for 12.5px since the first line is 50px wide (50 divided by 4 equals 12.5) to compress the 4 rows and so the fifth row is "pulled up" filling all the container.

Sorry for this messy explanation, hope future people will get the point looking at this :)

[Perrier33]

grid-template-rows: 50px 0 0 0 ; works perfectly for me.

[cchiennguyenn]

#garden {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 50px 0px 0px 0px; //only your 5th row
}

#water {
grid-column: 1 / 6;
grid-row: 5 / 6;
}

[astriauliya5]

imagine using 1fr 1fr 1fr 1fr 32fr

[IGORPORTELAMARTINS]

grid-template-rows: 50px 1fr 1fr 1fr 300000fr; também da certo

[usizu]

I got stuck here too, because repeat(4, 10px) looks correct in the graphic.

I got to that because initially I wanted to do repeat(5, 10px) 1fr (for the 50px) but then of course the water is misplaced in the 5th row, then I reduced the repeat to 4 rows and that's when it looks right. I got stuck because 50px / 5 = 12.5px is not something I do in my head, and when it says "create five rows in total" I think "ok, 50px / 5 = 10px".

IMO this exercise would be more clear if the water was set to the 6th row. It would feel less "gotcha".

PS. This grid garden game is really wonderful and I don't mean this comment to be perceived as critical

[usizu]

Can someone explain why this solution worked?

@agraham75 I believe it correctly makes the first 50px row, then it adds three rows of 0 height, and then grid automatically adds the 5th row to fill in the remaining space (the water).

Edit: oh I guess not, I didn't notice those grid lines suggesting that the 0 height rows are not actually 0px tall.