Comments (34)
repeat(4, 12.5px) 1fr;
thank me later
from gridgarden.
grid-template-rows: 50px 0 0 0;
works
from gridgarden.
This issue highlights the needs for hints in the game. I couldn't figure out the answer to this level either until I found this issue.
from gridgarden.
You almost have the solution except you've left 40px of space up top instead of 50px.
from gridgarden.
I think the difficulty lies here:
you'll need to create 5 rows in total.
One must interpret the question properly (5 rows are needed). Then the answer is straightforward.
50px 0 0 0 1fr
Which means:
1st column: 50px
2nd: 0px
3rd: 0px
4th: 0px
5th: 1fr (take all the remaining space)
The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same column
from gridgarden.
You could also do:
grid-template-rows: 12.5px 12.5px 12.5px 12.5px;
from gridgarden.
it has to be an error because it says the water should only fill the 5th row
from gridgarden.
grid-template-rows: 50px 0 0 0 1fr;
from gridgarden.
@yofriadi how you get that? did you make some calculation? any explain? o just testing the mesure?
repeat(4, 12.5px) 1fr;
thank me later
from gridgarden.
Here's mine:
grid-template-rows:50px 0px 0px 0px 1fr ;
from gridgarden.
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;
from gridgarden.
4 x 12.5px = 50px (takes care of the 50px gap at the top and uses 4 rows)
1fr (fills the rest of the space and uses 1 row)
--> the above equates to 5 rows.
I was stuck too on this one. The explanation is a bit cryptic but now I see the solution, it's clearer.
from gridgarden.
this is my ansower: grid-template-rows: repeat(4,12.5px) 1fr;
from gridgarden.
I think the difficulty lies here:
you'll need to create 5 rows in total.
One must interpret the question properly (5 rows are needed). Then the answer is straightforward.
50px 0 0 0 1fr
Which means:
1st column: 50px 2nd: 0px 3rd: 0px 4th: 0px 5th: 1fr (take all the remaining space)
The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same column
It's a great answer. but I noticed it also works without the 1fr in the end.
from gridgarden.
Here's mine: grid-template-rows:50px 0px 0px 0px 1fr ;
Just replaced 0px 0px 0px
with repeat(3, 0px)
. Great solution!
from gridgarden.
Why is this solution not accepted?
grid-template-rows: 50px 1fr 1fr 1fr 100%;
from gridgarden.
I kind of agree that this one was a bit vague. I solved it with
grid-template-rows: 50px 0 0 0 100%;
but it wasn't accepted.
Awesome project by the way, thanks for making this Thomas!
from gridgarden.
This can be handled with various combinations
This is my answer:
grid-template-rows: 20px repeat(3, 10px) 1fr;
20px for first row + 10px for next 3 row = 50 px for 1st four rows
1fr will take remaining space
from gridgarden.
repeat(4, 12.5px) 1fr;
thank me later
Thanks :)
from gridgarden.
Mine was : grid-template-rows: 50px 0 0 0 :)
from gridgarden.
However, 1fr is not even needed at the end. It is solved with:
grid-template-rows: repeat(4, 12.5px);
from gridgarden.
the answer is grid-template-rows:repeat(4, 12.5px) 1fr
from gridgarden.
Also: grid-template-rows: 50px repeat(3, 0) 1fr;
from gridgarden.
I just did this exercise and ran into the same problem. I came here and found the solution.
grid-template-rows: repeat(4, 12.5px) 1fr;
It is very strange, because supposedly it is as they say in another comment. But I also accept this. (?
grid-template-rows: 12.5px 12.5px 12.5px 12.5px;
from gridgarden.
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:
from gridgarden.
my answer --- grid-template-rows: 50px repeat(3, 0) auto;
from gridgarden.
grid-template-rows: 12.5px 12.5px 12.5px 12.5px 1fr;
This also works
from gridgarden.
This also works grid-template-rows: 50px 0 0 0;
from gridgarden.
I think the difficulty lies here:
you'll need to create 5 rows in total.
One must interpret the question properly (5 rows are needed). Then the answer is straightforward.
50px 0 0 0 1fr
Which means:
1st column: 50px 2nd: 0px 3rd: 0px 4th: 0px 5th: 1fr (take all the remaining space)
The water is set to fill the fifth column, so... All the carrots in the 5th column and the water filling this same columnIt's a great answer. but I noticed it also works without the 1fr in the end.
Great catch!
from gridgarden.
grid-template-rows: 50px repeat(3, 0px);
from gridgarden.
There need to be 5 rows - this is defacto.
So, the first "area" is to be of 50px.
The last area will be 1fr to water the whole carrot row length.
The first unwatered 50px can be done in various ways, as long as it takes 4 rows of any size, since it excludes the last area of 1fr as mentioned above.
Solution:
grid-template-rows: repeat(2, 0%) 25px 25px 1fr;
grid-template-rows: repeat(2, 0px) repeat(2, 25px) 1fr;
:))
from gridgarden.
Here's the best possible answer:
grid-template-rows: repeat(3, 10px) 20px 1fr;
from gridgarden.
grid-template-rows: 50px repeat(3, 0);
from gridgarden.
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:
grid-template-rows: repeat(4,12.5px) 1fr;
from gridgarden.
Related Issues (20)
- Level 20: auto alignment HOT 1
- Adding Arabic translation in progress HOT 1
- Level 8 span keyword not works HOT 2
- Add Finnish translation HOT 1
- Vietnamese review recommended HOT 1
- any random value for grid-column-end fills row HOT 1
- Feat request: Store progress in localStorage or indexedDB HOT 1
- Support multiple possible answers HOT 2
- Level 24 Won't Accept 50px repeat(3, 1fr) 50px HOT 1
- level 14 Question is incomprehensible HOT 1
- Level 24 breaks on some screen sizes HOT 1
- add a bunny
- N/A
- About node_modules folder HOT 2
- .
- Grid Garden Level 26 HOT 2
- Level 8 completes without writing any values
- Azerbaijan language HOT 3
- add grid guide lines
- Misleading wording in level 23
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridgarden.