thomaspark / gridgarden Goto Github PK

This issue similar as #102

grid-column-end: spa -> this is mark as correct
grid-column-end: span -> this is didn't accept

Both grid-template-columns: 50% 50%; and grid-template-columns: 1fr 1fr; are accepted as valid answers, but grid-template-columns: auto auto; is not considered a valid answer, when the result is exactly the same.

grid-template-columns: auto auto; should also be a valid answer.

Getting the use a newer browser message in Chrome Version 56.0.2924.87 (64-bit)

definition of water and poison are missing

The description states the following:

For example, we previously defined five 20% columns with the rule grid-template-columns: 20% 20% 20% 20% 20%;.
This can be simplified as grid-template-columns: repeat(5, 20%);
Using grid-template-columns with the repeat function, create eight columns each with 12.5% width.
This way you won't overwater your garden.

This should result in a correct answer of:
grid-template-columns: repeat(8, 12.5%);

The game accepts:
grid-template-columns: 12.5%;

I'm not sure if that's intended behavior, but it didn't behave as I would have expected. Thanks for making such a great game!

I put "grid-template-columns: 50px 3fr 50px;" in level 24 and it is not accepted. I saw this from games.answers variable. BTW I thought that the correct answer should be something like "grid-template-columns: 50px 3fr -50px;". Similarly grid-template-rows: 50px 4fr; is not accepted for level 26

I'm running the latest version of Chrome, yet the website claims that I need to update. I do see the game for a split second but then the message appears.

I'm running version 55.0.2883.75 (64-bit) on Ubuntu 16.04 LTS.

Oh no, Grid Garden doesn't work on this browser. It requires a browser that supports CSS grid, such as the latest version of Firefox, Chrome, or Safari. Use one of those to get gardening!

I tried with chrome and safari on my macbook pro =\

Hello.

I love Grid Garden very much! Thank you for this contents.

I found tiny typo at Level 25 in japanese.

At line 3, I think

Wrong => 食う海合わせて
Correct => 組み合わせて

Please check this. Thanks!

why not working?
grid-template: repeat(2, 610px)/ 21% 80%

What are you looking for as the answer to level 22? I'm finding it unclear but perhaps just not understanding.

I'm using grid-template-rows: 10px 10px 10px 10px 1fr; to create 5 rows, which (visually) correctly waters the bottom row only.

However that is not accepted as correct.

In your game.js file, I get this error when trying to use it:
Uncaught ReferenceError: Parse is not defined

grid-column-end: qwerty;
grid-column-end: ddd333;

and so on will work

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.

I believe the negative values on Level 6 are off by one. The value of Negative one (-1) causes the poison to be off the screen. The value of negative two (-2) causes the poison to be on the first block from the right. This seems inconsistent. Am I wrong?

There is a typo error in dutch for slide 22/28 "grid-template-columns accepteerd niet enkel waardes in percentages", should be "grid-template-columns accepteert niet enkel waardes in percentages"

I'm using Opera 44 on Mac

After the first few levels, I started seeing this weird water graphic on the intended answer:

When I type in the correct answer, the graphic becomes smooth:

It works fine on Firefox though. This could be a browser bug, just wanted to highlight it here and get some more information

First off thanks for the excellent game and learning tool!

The rules say: "Here the carrots form a 50 pixel column on the left, and the weeds a 50 pixel column on the right. Use fr to make three columns that take up the leftover space in between."

Of course the obvious solution works:

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

But I believe that solutions like this that also fulfill the conditions should work as well:

grid-template-columns: 50px 1fr 1fr 2fr 50px;

Although oddly this does work:

grid-template-columns: 50px 1fr 2fr 2fr 50px;

Hi, check this out:

Possible solution:
grid-column: 2/end; grid-row: 1/end;
doesn't trigger the "next" button. Requires you to write:
grid-column: 2/end; grid-row: 1/6;

It's not clearly explained in the instructions or css, why the initial layout goes:
water | poison | water | water | water
or whether this "splicing" phenomenon can occur in real life examples. (If the span of the water is 4 then it is indeed a splicing and not an overlapping.)

Instructions currently say:
If grid items aren't explicity placed with grid-area, grid-column, grid-row, etc., they are automatically placed row by row according to their order in the source code.

Row by row would mean on separate rows. Does it mean that the water and the poison must start in consecutive columns 1 & 2?

Hey there, I ran into an issue with the end level where I had
grid-template: 1fr 50px / 20% 80%

Now obviously it's more in the spirit of grids and the new fr unit to do
grid-template: 1fr 50px / 20% 1fr

But they both solve the problem correctly. I noticed someone else was having trouble who replied to your Twitter post. You may either want to hint at using fr's or accept equivalent conditions.

I use "grid-template-rows: 10px 10px 10px 10px 1fr;" this css rule, but this is wrong, I don't understand why.

grid-template: 100% / 20% 80%

Shows fully filled field yet it seems to be the wrong answer.

Hi, I think task is incorrect due to description which says about negative values, nevertheless grid-column-start begins from 1. And grid-column-end: 5.

there is a limit of 40 on the rendered grid items:

After completed all level, the image of treehouse's tree is linked to

http://treehouse.7eer.net/c/371033/228915/3944?subId1=flexboxfroggy

This link give me a 404 right now.

Hi guys,

I just completed this nice tutorial about CSS grid. An I just love it! Really great work!

A little addition that would make it even more helpful, I think, should be grid-template-areas. Personally, I find them soo useful as they make layouting with certain areas more easy. Not only is it more easy to read, but you can use different grid-template-areas definitions for different screen resolutions. Still, all client elements can reference the same area name and be layed out according the currently active template area.

A nice quick overview can be found in this CSS-Tricks article. An amazing presentation about the practical use of CSS Grid (in general and also template areas in specific) is given by Morten Rand-Hendriksen, speaking about how CSS Grid Changes EVERYTHING.

Level 21 isn't displaying the carrot image correctly.

OS: Linux Mint 18.3
Browser: Firefox V1.0 for Linux Mint

Thank you for the awesome games! They help a lot! 💯

Can you update the wording on this level since the wording feels vague.

I have tried grid-template-columns: 50px repeat(3, fr) 50px;
and grid-template-columns: 50px 3fr 50px;.

But none of the above have worked. Can you confirm what the question means and/or the solution.
Thanks

grid-column-start: -4 ; also passes the test. Not just span.

Hello,

Please help find the answer for level 25. I don't understand..I tried grid-template-columns: 75px repeat(5, 1fr); and it didn't work.

Hi there, amazing work here! But i think i found a bug:

Kind regards,

Hi!

Not sure how to solve this with span keyword.

The grid-column-end property is matching for all values which are greater than 5. Should we define only one matching value?

Hi, really nice tutorial. Noticed a little issue with keyword "span"

Using the current version of Chromium on Ubuntu 16.04:

Should be 1 / 2 / 4 / 6 instead 1 / 1 / 3 / 6 ?

grid-template-columns: 100px, 3em, 40%;

does no activate Next button..

Last line in description is - "Note that the carrots start at the 1st vertical grid line and end at the 4th. "
But in HTML it ends in 3rd.

Is there a reason why the node_modules folder is versioned?

I'd like to translate this great CSS Grid tutorial of yours to Greek, and thought I'd look at the fonts used, to see if they're compatible. It appears that the main font used is PT Sans, by which the only non-latin-character language supported is Russian. I wondered then what font was used for the farsi translation, and found out it was Tahoma, with Verdana, Segoe and sans-serif used as fallbacks, and this because the exception was specified in the .css file .
It seems then that the current main font doesn't support Greek (I didn't find in the code though what fonts are used for chinese and korean, so maybe the fonts used for these support Greek as well?), and the font configuration might have to be changed in order to support it. In another project where I wanted to contribute a Greek translation, because all the other translations had latin characters, the maintainer had to change the main font (also PT Sans) to another one, compatible with Greek (I proposed Open Sans, Noto Sans and Roboto, and he picked the first). But this project having already accounted for languages with non-latin characters could use a different approach from that one, and just define an exception in the css as in the case of farsi. Please let me know of which approach is easier for you.

P.S.The other two fonts used throughout the site, the one for the title "GRID GARDEN" (Autour One) and the one for the source code (Source Code Pro) can obviously remain as they are, since the strings they style remain in english in all translations.

setting order:1; does not work = (

How can I resolve it?

This is a cool idea, but quite difficult to read some of the text, I know that part of the code is intended to be less easy to read to focus the user on writing the code, but even the main instructions are low contrast.

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: