robertpenner commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Some people stumped by the math in level 26: https://github.com/thomaspark/gridgarden/issues/66

robertpenner commented 6 years ago

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

Joru-chan commented 5 years ago

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 commented 5 years ago

I didnt get it :/

jogavidia commented 5 years ago

It's not clear

realtebo commented 5 years ago

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.

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

so

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
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 commented 5 years ago

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 commented 5 years ago

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

Linxeyes commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

MDutro commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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: Captura de Pantalla 2020-01-15 a la(s) 15 12 33

0Phenix0 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

PremanandChowdhury commented 4 years ago

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 commented 4 years ago

Bug 😁

anpel commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

katsuya245126 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

water all but the top 50 pixels
5 rows in total
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 commented 3 years ago

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

grid26

kzsa commented 3 years ago

: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 commented 3 years ago

Hey @kzsa, thanks for sharing your thoughts.

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

kzsa commented 3 years ago

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 notifications@github.com 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 commented 3 years ago

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

BlasToth commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Screenshot_3

ElijahLynn commented 3 years ago

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 commented 3 years ago

Can someone explain why this solution worked?

youarebju commented 3 years ago

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

zhangjun620 commented 3 years ago

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

nataliecardot commented 3 years ago

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 commented 2 years ago

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.