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?
> 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
In my experience CSS is often written by non-programmers. So maybe they were assuming that CSS developers wouldn't be familiar with starting counting at 0? That the y/x instead of x/y thing is bizarre. Even elementary or middle school kids learn it as x/y.
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.
Indexing into 2D containers is often an exception to the "x, then y" rule; indexes are very often specified with "row, then column"[1]. It's true that this is different to Cartesian coordinates, but grid cells aren't points or locations on a Cartesian plane, they're members of a 2D container: the grid.
>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?
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/
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?
Grid shipped in Chrome, Firefox, and Safari in the last month: it really does mean the latest version, currently. Anything older doesn't have Grid support (okay, ignoring IE/Edge and their prefixed implementation of ~2010 draft which has little in common with what has now shipped elsewhere).
56 is latest stable, though I think 57 is rolling out. From quick search, 57 seems to be the one that has added support for CSS Grid (which is very new). So it's not so much that your browser is outdated, but rather that this feature is fresh out of the oven.
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.
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.
I love contrast rebellion (aside: tool to check your contrast game is 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
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.
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.
I'd guess a year or so before it's safe. A lot of smartphones (android browser, looking at you) are based on a build of chromium that's a few versions old. Edge support isn't here yet, but it's being worked on. IE11 will never support it, so if you're doing enterprise applications you might never get to use it.
You can use it with @supports and robust fallbacks now, but that does lead to writing the same layout styles twice basically. I don't know how desirable that is.
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.
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.
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.
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.
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.
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.
`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?
"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
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.)
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.
[+] [-] ajross|9 years ago|reply
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?
[+] [-] baby|9 years ago|reply
* grid-column-index-start
* grid-column-index-end
* grid-column-length
PS: I have to say though that this grid thing is fucking awesome, and this game to learn this grid thing is fucking amazing as well.
I've being coding HTML since 2001, and have started using CSS in 2005. I can say that I've been dearly missing tables until now.
[+] [-] wnevets|9 years ago|reply
but consistent with the rest of CSS IIRC, for example nth-child starts at one
[+] [-] SamBam|9 years ago|reply
[+] [-] irrational|9 years ago|reply
[+] [-] sfilargi|9 years ago|reply
Not for rectangles, but the closest example of Y/X I can think of is GW-BASIC's "locate". It gets row number first and column number next. I.e Y/X
[+] [-] splicer|9 years ago|reply
[+] [-] jackielii|9 years ago|reply
[+] [-] pidg|9 years ago|reply
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!
[+] [-] kenbellows|9 years ago|reply
1: https://en.wikipedia.org/wiki/Index_notation#Two-dimensional...
[+] [-] chme|9 years ago|reply
Why isn't 0 the left most line as column and the top most line as row. That would make so much more sense, IMO.
What could be the reason they haven't done it this way? Or are 1 based arrays normal here?
[+] [-] irishsultan|9 years ago|reply
[+] [-] ysavir|9 years ago|reply
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|9 years ago|reply
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/
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
[+] [-] gsnedders|9 years ago|reply
[+] [-] ehsankia|9 years ago|reply
[+] [-] taternuts|9 years ago|reply
[+] [-] jwarren|9 years ago|reply
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] cr0sh|9 years ago|reply
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|9 years ago|reply
[+] [-] clishem|9 years ago|reply
[+] [-] spoiler|9 years ago|reply
[+] [-] stigi|9 years ago|reply
[+] [-] legulere|9 years ago|reply
[+] [-] irishsultan|9 years ago|reply
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.
[+] [-] bigbugbag|9 years ago|reply
my solution to level 21 was one 50px column, three columns taking equal share of remaining space, one 50px column.
[+] [-] Kezako|9 years ago|reply
[+] [-] yellowapple|9 years ago|reply
[+] [-] jonahx|9 years ago|reply
[0]: http://caniuse.com/#feat=css-grid
[+] [-] paradite|9 years ago|reply
[+] [-] ahoy|9 years ago|reply
You can use it with @supports and robust fallbacks now, but that does lead to writing the same layout styles twice basically. I don't know how desirable that is.
[+] [-] yellowapple|9 years ago|reply
It ain't perfect, but it works pretty decently.
[+] [-] ArlenBales|9 years ago|reply
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|9 years ago|reply
[+] [-] teleclimber|9 years ago|reply
Otherwise the game was a great way to ease in to grid.
[+] [-] codyb|9 years ago|reply
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|9 years ago|reply
[+] [-] taternuts|9 years ago|reply
[+] [-] welpwelp|9 years ago|reply
[+] [-] stupidcar|9 years ago|reply
[+] [-] pc2g4d|9 years ago|reply
Anybody have an explanation for this surprising behavior?
[+] [-] gondo|9 years ago|reply
[+] [-] paradite|9 years ago|reply
[+] [-] Johnnynator|9 years ago|reply
[+] [-] smpetrey|9 years ago|reply
[+] [-] ahoy|9 years ago|reply
[+] [-] EamonnMR|9 years ago|reply
[+] [-] Neliquat|9 years ago|reply
[+] [-] nvdk|9 years ago|reply
edit: scratch that I was confusing css grid for flexbox, my browser does not support css grid yet.