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: https://github.com/thomaspark/gridgarden/issues/23

[robertpenner]

Some people stumped by the math in level 26: https://github.com/thomaspark/gridgarden/issues/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.

[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 https://github.com/thomaspark/gridgarden/issues/73#issuecomment-757525246, 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!

[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

[AhmadDalao]

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

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

[agraham75]

Can someone explain why this solution worked?

[youarebju]

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

[zhangjun620]

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

[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

[lisabroadhead]

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