
Grid Garden – A game for learning CSS grid - jwarren
http://cssgridgarden.com/
======
ajross
Immediate learnings from the first 3 exercises:

1\. Grid columns and rows are 1 indexed instead of 0, ensuring a coming decade
of mistakes due to the mismatch with Javascript (and, y'know, everything else)
conventions for arrays.

2\. Grid extents use the "one more than end" convention instead of "length",
which is sorta confusing. But then they call it "end", which is even more so.

(edit) more:

3\. grid-area's four arguments are, in order (using normal cartesian
conventions to show how insane this is): y0 / x0 / y1 / x1. Has any API
anywhere ever tried to specify a rectangle like this?

~~~
wnevets
> Grid columns and rows are 1 indexed instead of 0, ensuring a coming decade
> of mistakes due to the mismatch with Javascript (and, y'know, everything
> else) conventions for arrays

but consistent with the rest of CSS IIRC, for example nth-child starts at one

~~~
ajross
True enough, but that causes much less damage because except in the rarest
situations, you never write code to do random access to an array of children,
you just iterate over them without using indices at all.

This is opening up a situation where you have a 2D Javascript array for a
model and a bunch of components in the layout (a chessboard, imagine). And the
coordinates won' t match!

~~~
torrent-of-ions
What is your concern? Code beauty? What kind of programmer can't deal with
converting between 0 and 1 based arrays?

~~~
ajross
What kind of programmer can't remember to check return values of system calls?

What kind of programmer can't deal with properly escaping input under the
control of the user?

What kind of programmer can't deal with keeping array indexes in bounds?

(tl;dr: _you_. And me.)

~~~
torrent-of-ions
None of that is like dealing with 0/1 arrays. Almost everything you encounter
in real life starts with 1, not 0. If anything it's the 0 based array that
should be consider "wrong" and the cause of so many errors. But we use 0 based
arrays because of the C/assembly legacy where the 0 means the location of the
array with a 0 offset.

~~~
garaetjjte
[http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EW...](http://www.cs.utexas.edu/users/EWD/transcriptions/EWD08xx/EWD831.html)

------
pidg
Nice game!

This made me uncomfortable though (about CSS grid, not about the game):

grid-area: row start / column start / row end / column end;

So you have to put the rows (Y axis coordinates) first and columns (X axis
coordinates) second, i.e. the opposite of how it's done in every other
situation - i.e. draw_rect(start_x, start_y, end_x, end_y)

(1, 1, 3, 4) in every other language would draw a box 2 wide and 3 high, but
in css grid it selects an area 3 wide and 2 high.

Also the fact it uses 'row' and 'column' to describe the gridlines rather than
the actual rows and columns irked me.

I'm sure I'll get over it!

~~~
irishsultan
Unfortunately it's somewhat consistent with the rest of css (e.g. padding is
top left bottom right)

~~~
judah
Small correction: padding is top right bottom left. In other words, clockwise.

~~~
cr0sh
I always used the mnemonic "TRouBLe" to remeber the order.

There was another one for a different CSS thing (that I'm blanking on) that
was based on the word "love" or something like that...

~~~
danadam
LoVe HAte, the order of pseudo classes: :link :visited :hover :active

~~~
yellowapple
I'm starting to suspect that CSS was invented by Taylor Swift.

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

Is Chrome 56 so outdates that this grid box doesn't work with it?

Or, perhaps, does the game only check if I'm running the "latest" version,
regardless of which browsers do or do not actually work with Grid Garden?

Edit: Oh, wow, 56 _is_ that outdated. Talk about cutting edge technology?

~~~
overlordalex
This just made me realise how difficult it is to check my version.

1\. Hamburger menu -> hunt for the 'about' -> version 54. Great!.. or..not? Is
that old?

2\. Google "google chrome current version" -> skip past a few 3rd party sites
detailing how to find the 'about' page -> Choose what I assume is the product
page: [https://www.google.com/chrome/](https://www.google.com/chrome/)

3\. No version number in this page. In fact, no mention of browsers at all!
The page appears to be an advert for chromebooks. In the bottom left, in the
site-navigation footer there is 'browser' under 'products'.

4\. Ah, this is more like it. This looks like your typical marketing
website/landing page - fancy feature list, big download button, but... no
version number? -> Click "Download"

5\. A terms of service and a download button? What version am I going to
"Accept and Install"?? Filename it wants to download is "google-chrome-
stable_current".. great! Is that the version I currently have?

Unsurprisingly wikipedia has all the information I wanted:
[https://en.wikipedia.org/wiki/Google_Chrome_version_history](https://en.wikipedia.org/wiki/Google_Chrome_version_history)

~~~
Nadya
Step 1 will attempt to update and tell you what the new version is. It will
also tell you you are out of date. Recalling from memory, it looks like this:

    
    
        Google Chrome is out of date.
        Version 54.0.239.240 (Official Build) (##-bit)
        
        Update available: Version 57.0.2987.133

~~~
owlninja
Mine just started updating as soon as I hit 'About'

------
jwarren
The creator, Thomas Park ([http://thomaspark.co/](http://thomaspark.co/)) is
also the author of the similar and similarly excellent Flexbox Froggy:
[http://flexboxfroggy.com/](http://flexboxfroggy.com/)

------
cr0sh
First off - I liked the game. It was fun. No arguments there.

But (and nothing against the author of the game)...

I'm going to jump on the bandwagon here of others wondering just what the
person or committee who thought up the API was smoking when they came up with
it?

At first, it made kinda sense. Nothing too troubling.

But the deeper it went, the less it made sense. I don't have a problem with 1
vs 0 indexing (because I started coding in old-school BASIC back in the
dinosaur days of microcomputing - so that doesn't bother me much).

It's just that the rest of the API seems arbitrary, or random, or maybe ad-
hoc. Like there were 10 developers working on the task of implementing this,
but with no overall design document to guide them on how the thing worked.

I'm really not sure why there's two (or three? or four?) different ways to
express the same idea of a "span" of row or column cells, based on left or
right indexing, or a span argument, or...???

Seriously - the whole thing feels so arbitrary, so inconsistent. This API has
to be among the worst we have seen in the CSS world (not sure - I am not a CSS
expert by any means). I can easily see this API leading to mistakes in the
future by developers and designers.

We'll also probably see a bazillion different shims, libraries, pre-compilers,
template systems, whatever - all working on the same goal of trying to fix or
normalize it in some manner to make it consistent. Unfortunately, all of these
will be at odds with one another.

I'm sure JQuery will have something to fix it (if not already). Bootstrap too.

The dumb thing is that had this been designed in a more sane fashion, such
hacks wouldn't be needed.

~~~
irrational
From my understanding a lot of it has to do with needing to take localization
into account. The developers aren't stupid, they are just working under more
considerations than you are taking into account in your narrow worldview.

------
clishem
I can hardly read the code
([https://i.imgur.com/fEsIYdA.png](https://i.imgur.com/fEsIYdA.png)). Author
needs to take a look at
[http://contrastrebellion.com/](http://contrastrebellion.com/).

~~~
spoiler
I _love_ contrast rebellion (aside: tool to check your contrast game is
[http://leaverou.github.io/contrast-
ratio/](http://leaverou.github.io/contrast-ratio/)), but I believe the author
of the website intended it to be so as to draw attention to make your code
stand out. However, I agree the contrast isn't high enough

~~~
thomaspark
Yup that's the idea. Trying not to overload people focusing on a single new
property, while still giving the full context of the ruleset. I will see about
bumping up the contrast a bit.

~~~
ahoy
Increasing the contrast on hover might do the trick.

------
stigi
I love how the name resembles the classic
[http://csszengarden.com](http://csszengarden.com)

------
legulere
Level 21 was pretty hard for me. It lacked the explanation that fr goes from 0
to 100 like %.

~~~
irishsultan
Because that's not actually what's happening.

For example if you have 1fr 1fr 1fr that will give you three equally large
columns that take up the rest of the space, but you can also use 0.33fr 1fr
1fr which gives you one column that's one third the size of the other two.

~~~
thomaspark
Yeah, although the problem is that using 33fr 33fr 33fr, will have the same
effect and lead to that perfectly reasonable conclusion.

I'll work on improving the explanation of level 21 and fr units in general.

~~~
bigbugbag
it took a couple tries to understand that level 21 requires a total of 5
columns, I was trying 50px 1fr 50px.

The gotcha is that actual value in fractional units is irrelevant as long as
you defined the right number of columns.

~~~
crusso
This had me stuck for a few minutes too. I had exactly the answer you have
above and didn't realize the context that I needed 5 columns.

Maybe showing more context in how the grid containers are defined?

------
Kezako
There is also a nice postCSS plugin to build css grids through a kind of
"ASCII-art": [https://github.com/sylvainpolletvillard/postcss-grid-
kiss](https://github.com/sylvainpolletvillard/postcss-grid-kiss)

~~~
yellowapple
The grid spec has something kind of similar through defining "regions". It's
been a godsend.

------
jonahx
How long will it likely be before CSS Grid can be used in the wild? Current
browser support seems to be only about 35% [0].

[0]: [http://caniuse.com/#feat=css-grid](http://caniuse.com/#feat=css-grid)

~~~
paradite
A lot of that is older version of Chrome (56) and iOS Safari (10.2), you can
check the usage relative from the same website. Given their automatic update
features, it would be changed pretty soon.

------
ArlenBales
I think these CSS learning games would work better if the game you were trying
to complete was something you would actually use the technology for. For
example, a game that involves building a website. (e.g. Instruct me to make
the page for UX friendly by moving an element from one column to another, or
adjust columns, etc.)

I would never use CSS grid to do what this game is asking me to, so even
though it helps me learn the syntax and properties, it's not helping me learn
how it's going to be applied to an actual website.

------
philh
This is a neat game, but I have to say that the explanation of order didn't
feel particularly enlightening, and I was hoping it would become clearer but
it never got used again.

~~~
teleclimber
Agreed. I have no idea how order works and I don't have a clue how setting
order: 1 in that part of the game did what it did.

Otherwise the game was a great way to ease in to grid.

~~~
jayrhynas
The way I see it, is:

For all elements not explicitly positioned, sort by `order` value. If two
elements have the same `order` value, sort by the order they appear in the
source.

So in the game, setting the `order` of the `#poison` to any value greater than
0 (the default) will move it to the end.

------
codyb
I'm a bit confused by level six.

grid-column-start: 0 - doesn't exist grid-column-start: 1 - leftmost square
grid-column-start: 2 - 2nd square left to right grid-column-start: -1 - also
doesn't exist? grid-column-start: -2 - rightmost square

Very strange. Although the concepts are neat so far.

The / notation in grid-column: 2 / 4;

is interesting. I'm surprised it's not similar to say margin: 20 30 20 20;

where there's no slash, just an ordering to remember (clockwise from top).

Default span is 1 which is sensible so grid-column: 3 === grid-column: 3/4 ===
grid-column: 3/span 1;

Wow the fr unit is pretty neat!

You can see where the slash is very useful in grid-template which makes a lot
sense for dynamic numbers of rows and columns.

Very fun. I still have some questions about the numbering, but a great way to
learn about CSS grid and have a bit of fun.

------
enugu
Is there a library or babel like transform on server side which can enable
this feature in older browsers? Most clients wont have this enabled for some
time now.

~~~
taternuts
I think in most cases the polyfills end up being pretty expensive to use. I
know that's the reason why I'm not able to use a flexbox polyfill at work for
IE9 support, though not sure if this particular feature set would be as bad to
implement.

~~~
enugu
Thanks. I was unaware of this particular term which was also a good keyword
for google.

There is an alpha polyfill effort here. [https://github.com/FremyCompany/css-
grid-polyfill](https://github.com/FremyCompany/css-grid-polyfill)

Regarding speed, here's the author's take.

> I wouldn’t say this polyfill is slow by any measure, but your mileage may
> vary on mobile devices. My advice would be to use the polyfill only on
> tablets and desktops at the moment, after you have tested the compatibility
> and performance extensively on a representative number of devices.

Also, there are js layout libraries used with similar functionality, so one
can expect that it is possible to implement this feature with the same
efficiency.

~~~
gsnedders
Its author, François REMY, is now on the layout team working on Edge. I
wouldn't at all be surprised if he was one of the people on the Edge team
working on updating their implementation.

There are definitely cases for which the polyfill is likely going to be
asymptotically worse than a native implementation, though there will also be
plenty of simple cases where the efficiency loss is relatively small.

------
welpwelp
Is this like a built-in equivalent of Skeleton and similar frameworks? It's
kinda cool the way it brings CSS closer to frameworks like iOS', which has
built-in UI components like collection views and such that can be extended to
build interfaces easily.

~~~
stupidcar
Kinda, but it is a lot, lot more powerful than Skeleton or any other previous
CSS grid framework. The way I've heard it put is that if flexbox is what you
use to do 1-dimensional layouts in CSS, then grid is its equivalent for
2-dimensional layouts.

------
pc2g4d
`grid-row: -2` targets the bottom-most row, whereas I would have expected
`grid-row: -1` to do so. I've never seen `-2` used to refer to the last
element in a sequence. Python [1,2,3][-1] yields 3, for example.

Anybody have an explanation for this surprising behavior?

~~~
zerocrates
The logic goes like this: everything is 1-indexed, including the negative
numbers (zero is just illegal).

1 means "the first grid line" aka the top edge of the grid , and -1 means "the
last grid line" aka the bottom edge of the grid.

grid-row is a shorthand property, and giving just one number is equivalent to
specifying it as grid-row-start, so your declaration is the equivalent of
grid-row-start: -2

Specifying a negative counts from "the other side," but it _doesn 't_ change
how the automatic span/end is calculated. It's still 1 grid-line "further" by
default. This is why you need to use -2: with -1 you're saying: occupy one row
starting from the far bottom edgeline of the grid, going down (meaning the
first row _outside_ the grid).

To get the last row, you want to say "start at one grid line from the bottom
and go one line down," meaning you want grid-row-start: -2, or in shorthand
grid-row: -2.

------
gondo
"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 am running Chrome 56 on MacOS

~~~
paradite
Go to chrome://help/ and update it to 57.

~~~
dbg31415
I mean... that fixed it, but why didn't it like Chrome 56? Seems like a bug.

~~~
NiLSPACE
Because Chrome 56 doesn't support CSS Grid. It's really new.

~~~
dbg31415
Love how HN is turning into Reddit with all the downvotes lately. Raise a
legit issue, lose 5 internet points. Downvotes are toxic.

It said I wasn't on Chrome... it should have said, "You're on a version of
Chrome that doesn't support this..."

Telling me I wasn't on Chrome was a bug... or at best really poor UX.

~~~
tsul
I don’t believe the downvotes are justified, but it the message you quoted
specifies that you need to be on the _latest_ version of Chrome—which you
weren't.

------
smpetrey
So the moment everyone hops on Flex-Box, CSS Grid becomes the next hot take
now huh?

~~~
ahoy
They work well together. Grid doesn't replace flexbox.

------
EamonnMR
This is pretty cool. One thing I notice is that when you submit an answer, it
shakes the editor box. This usually has a "you did something wrong"
connotation (ie if you type a bad password when signing into a mac.)

~~~
Neliquat
That must just be a mac thing... cant recall seeing it in a native ui, only
games. Although at least a few wm have it, most devs have the good sense not
to use it, much like the blink flag of yore.

------
nvdk
Ugh does not seem to use feature detection, but some other ugly browser
detection scheme :/

edit: scratch that I was confusing css grid for flexbox, my browser does not
support css grid yet.

------
Honzo
Why wouldn't grid-column-start/end be zero indexed?

~~~
Honzo
Ah I'm thinking of it wrong. The indexes are not the boxes but the splits in
between.

| <\- 0 1 -> | <\- 1 2 -> | <\- 2 3 -> |

That makes more sense.

~~~
ahoy
You're halfway there. The indices are the grid lines, but they're also one-
indexed. That's consistent with other parts of CSS, though it's inconsistent
with the rest of the programming world.

~~~
goatlover
Julia, R, Matlab, Basic and Fortran disagree.

It's just that C's heavy influence resulted in most languages with arrays
being 0 indexed.

~~~
fineline
APL disagrees too. Except when it doesn't.

------
Pigo
I haven't stepped up my styling game in awhile. Would anyone like to explain
to me how css grid is better than say flexbox, or how the two are different?

~~~
sarcas
Both Jen Simmons and Rachel Andrew have lots of good resources for
understanding the new CSS layout techniques. This article of Rachel's is a
year old, but will still give you a good understanding of the differences
between the two: [https://rachelandrew.co.uk/archives/2016/03/30/should-i-
use-...](https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-
flexbox/)

Jen's got lots of great links here:
[http://jensimmons.com/post/feb-27-2017/learn-css-
grid](http://jensimmons.com/post/feb-27-2017/learn-css-grid), including
thoughts about how we're going to be able to use all these new layout
techniques in ways both new and old.

It's an exciting time to be designing on the web :->

------
weavie
Huh? I was only just starting to get used to flexbox. Are CSS grids meant to
be a replacement/alternative/addition to flexbox?

~~~
ahoy
Not really. Flexbox is good for laying elements out along a single axis,
either horizontally or vertically. Grid is good for doing true 2-dimensional
layout.

You'll probably end up using both of them - grid for larger layouts and
flexbox for smaller components. They work together fairly harmoniously.

------
friendzis
Sounds a bit peculiar when you put it this way, but chrome has finally caught
up with IE :)

One more excuse not to use HTML tables in our toolbox

------
julie1
wahou the Tk grid manager is back again.

Rule#1 of GUI every geometry manager will reinvent Tk/Tcl poorly saying it is
crap.

------
sultanofsaltin
Well that was fun! The last level took me a couple minutes (maybe have brute
forced the prior fr example).

------
Twisol
This is really nice! It pegs my CPU something awful though -- Firefox 52 on a
mid-2014 Macbook Pro.

------
selbekk
Love this game - can't wait to start using this in production - in about two-
three years ^^

------
danadam
#DDDDDD on #AAAAAA

Ever heard of this thing called "contrast"? Could use some.

~~~
JCzynski
No, it's working as intended.

------
kiflay
awesome. Few of the levels like level 23, 24 found them a bit difficult ,Can't
find a solution. would have been great if there was a solution where i can
compare my results with it.

~~~
jws
I'm not sure if you are hung up on syntax or strategy, but you can use "fr"
other than at the end.

~~~
kiflay
no solution for each question unless you get it right.

------
darth_mastah
Very good work, the Grid Garden.

As a side note, I find the grid API confusing as well.

------
chasing
Very nice! Works as advertised. ;-)

------
suyash
Unfortunately it's totally broken, on latest Safari and it says download new
version of Safari to work.

------
PericlesTheo
Nicely done!

------
trippo
test

------
redsummer
Haven't worked in CSS for about 5 years, but managed to get thru this. Are
there any other decent games to learn CSS and JS?

~~~
Eric_WVGG
same guy — [http://flexboxfroggy.com](http://flexboxfroggy.com)

------
macphisto178
Do I have to use Canary? I'm on latest Chrome and it says my browser isn't
supported.

~~~
jwarren
It was added to the latest stable version of Chrome, which is version 57. My
specific version is 57.0.2987.133

~~~
soneca
Yes, I was using 56, didnt work. I had to let it restart to update to 57 (I
let my browser always open) now it is working.

------
pjmlp
"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!"

Oh well, maybe in 5 years time I can make use of this.

~~~
lucideer
[http://caniuse.com/#feat=css-grid](http://caniuse.com/#feat=css-grid)

It's been supported (albeit prefixed) in IE since v11 (pre-11 versions are
<<1% these days), which makes Android browser the only significant current
version lagging.

In fact, one could observe that Chrome is the browser "holding this feature
back", given the very high percentage of people on version 56 of Chrome (which
will decline very rapidly given Google's aggressive browser updater).

TL;DR: if you start using CSS Grid today, it'll probably be widely supported
by the time you commit your code.

~~~
pjmlp
> pre-11 versions are <<1% these days

I wish, I guess you don't do much enterprise intranets.

~~~
lucideer
I'm just going on StatCounter global stats, which is what caniuse reference.
I'm sure usage within certain geographical areas or certain demographics may
be higher or lower, but in those cases you're probably taking a more careful
approach to a wide selection of modern browser features already anyway.

For the average case (or probably the more common case - not everyone works in
b2b) CSS grids are going to be fine to use almost immediately.

~~~
mathw
Sadly it's really hard to convince corporate entities whose web products are
used by other corporate entities that they don't still need to support IE8.

Even more sadly, sometimes they really do still need to support IE8...

Although actually I haven't had to do something for <IE10 for a while now.
Woohoo!

