from Hacker News

Grid Garden – A game for learning CSS grid

by jwarren on 4/5/17, 11:50 AM with 131 comments

  • by ajross on 4/5/17, 2:31 PM

    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?

  • by pidg on 4/5/17, 1:19 PM

    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!

  • by ysavir on 4/5/17, 1:33 PM

    >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?

  • by jwarren on 4/5/17, 11:51 AM

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

  • by cr0sh on 4/5/17, 5:00 PM

    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.

  • by clishem on 4/5/17, 2:03 PM

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

  • by stigi on 4/5/17, 1:48 PM

    I love how the name resembles the classic http://csszengarden.com

  • by legulere on 4/5/17, 1:23 PM

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

  • by Kezako on 4/5/17, 2:03 PM

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

  • by jonahx on 4/5/17, 12:55 PM

    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

  • by ArlenBales on 4/5/17, 4:59 PM

    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.

  • by philh on 4/5/17, 2:59 PM

    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.

  • by codyb on 4/6/17, 1:17 AM

    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.

  • by enugu on 4/5/17, 2:07 PM

    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.

  • by welpwelp on 4/5/17, 1:07 PM

    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.

  • by pc2g4d on 4/5/17, 8:46 PM

    `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?

  • by gondo on 4/5/17, 12:44 PM

    "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

  • by smpetrey on 4/5/17, 2:13 PM

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

  • by EamonnMR on 4/5/17, 2:22 PM

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

  • by nvdk on 4/5/17, 2:57 PM

    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.

  • by Honzo on 4/5/17, 1:18 PM

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

  • by Pigo on 4/5/17, 1:41 PM

    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?

  • by weavie on 4/5/17, 2:47 PM

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

  • by friendzis on 4/5/17, 12:42 PM

    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

  • by julie1 on 4/5/17, 8:58 PM

    wahou the Tk grid manager is back again.

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

  • by sultanofsaltin on 4/5/17, 4:39 PM

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

  • by Twisol on 4/5/17, 12:58 PM

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

  • by selbekk on 4/5/17, 1:43 PM

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

  • by danadam on 4/5/17, 6:09 PM

    #DDDDDD on #AAAAAA

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

  • by kiflay on 4/5/17, 3:40 PM

    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.

  • by darth_mastah on 4/5/17, 10:45 PM

    Very good work, the Grid Garden.

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

  • by chasing on 4/5/17, 2:31 PM

    Very nice! Works as advertised. ;-)

  • by suyash on 4/5/17, 4:39 PM

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

  • by PericlesTheo on 4/5/17, 12:40 PM

    Nicely done!

  • by trippo on 4/7/17, 8:20 AM

    test

  • by redsummer on 4/5/17, 3:59 PM

    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?

  • by macphisto178 on 4/5/17, 12:26 PM

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

  • by pjmlp on 4/5/17, 1:46 PM

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