Level 26 is difficult to understand

[robertpenner]

I love Flexbox Froggy and Grid Garden; thank you for this great resource.

I was in a nice flow state with Grid Garden levels gradually increasing in difficulty.

Then level 26 happened. It's such a frustrating jump in complexity.
Most of the time I was scratching my head trying to figure out the instructions:

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 read and re-read this so many times. I was thinking: "There are multiple rows of vegetables but for some weird reason, the water can only fill the 5th row? But I'm supposed to create 5 rows? That doesn't make any sense."

Eventually I "figured out" that I was supposed to subdivide the 50px of space into 4 tiny rows. So far the levels had felt grounded in the garden metaphor. But this level felt like a gotcha riddle with no rationale in the garden. Why 4 tiny rows of dirt but 1 enormous "row" covering rows of vegetables? Even a little thing like having to make the rows 12.5px instead of an even number like 10px felt unnecessary and annoying.

I imagine level 26 is intended to teach a specific concept. I hope the level can be reworked to teach that concept in a simpler way.

Otherwise, great job on the flow.

[robertpenner]

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

[robertpenner]

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

[robertpenner]

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

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

[nadieenespecial]

I didnt get it :/

[jogavidia]

It's not clear

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

[robdll]

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

[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 ^^.

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

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

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

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

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

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

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

[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

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

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

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

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

[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

[bakerlisa]

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

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

[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. 😂

[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

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

[Joakoq12]

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

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

[ceddddy]

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

[SCORPSTREAM]

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

[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

[ileadu]

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

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

[ghost]

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

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

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

[DavidAyoa]

i feel like grid-template-rows: 50px 0 0 0; is the most correct answer for it and here's an explanation. Understand first that the water is "stuck" on the last row due to this code:

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

The grid-template-rows: 50px 0 0 0; CSS property defines the height of each row in a grid layout.

• 50px: The first row will have a height of 50 pixels.
• 0: The second, third, and fourth rows will have a height of 0 pixels each.

By setting the height of rows to 0, those rows effectively collapse and become invisible, occupying no space in the layout.
I find this can be useful when you want to control the visibility or space allocation of rows dynamically.

[Shahid-ahmad-hajam]

It's Answer is this: grid-template-rows:repeat(4,12.5px) 1fr;

[Algharna]

[50px 1fr 1fr 1fr 100%;](grid-template-rows: 50px 1fr 1fr 1fr 100%;) Had to dig around to find this thread, wouldn't this work as well?