9 ms·
Grid Garden – A game for learning CSS grid
- Pigo 10y agoI 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?
- mathw 10y agoCSS Grid complements Flexbox by providing two-dimensional grid-based layout capabilities. Flexbox can only lay things out along one axis, and although you can do a lot of things that look a bit grid-like with it (usually involving multiple flex containers), it doesn't actually think in grid terms to do it. So with CSS Grid and a few media queries it's pretty trivial to have a full-on, really robust grid layout on a desktop site and have it gracefully reflow itself into a column layout to render on a phone, with source element ordering being completely irrelevant. Or at least, it will be when the mobile and desktop browser support picture for it is good enough.
- sarcas 10y agoBoth 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-grid-or-flexbox/ https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-... 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 :->
- ysavir 10y ago>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?
- gsnedders 10y agoGrid 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).
- teleclimber 10y agoMS team said they were working on the standard CSS Grid implementation now https://twitter.com/MSEdgeDev/status/848997331567497216 https://twitter.com/MSEdgeDev/status/848997331567497216
- irrational 10y agoAfter everyone else has already shipped. Typical. Better late than never I guess. At my work we have stopped testing on MS browsers. The higher ups have decided that it's not worth the time to support any version of IE and Edge. If it works on those browsers, great. But if it doesn't we won't do anything to address it. We started this about a year ago and so far nobody has said anything. Of course we are fortunate that we are not selling anything so we don't have to worry about things like lost sales.
- overlordalex 10y agoThis 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
- jwarren 10y agoThe 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/
- deleted 10y ago[deleted]
- macphisto178 10y agoDo I have to use Canary? I'm on latest Chrome and it says my browser isn't supported.
- PericlesTheo 10y agoNicely done!
- friendzis 10y agoSounds 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
- deleted 10y ago[deleted]
- gondo 10y ago"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 10y agoGo to chrome://help/ and update it to 57.
- dbg31415 10y agoI mean... that fixed it, but why didn't it like Chrome 56? Seems like a bug.
- NiLSPACE 10y agoBecause Chrome 56 doesn't support CSS Grid. It's really new.
- dbg31415 10y agoLove 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 10y agoI 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.
- Johnnynator 10y agoCSS grids were added in chrome 57...
- jonahx 10y agoHow 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 10y agoA 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.
- ahoy 10y agoI'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.
- yellowapple 10y agoThere's a polyfill that should help on unsupported browsers: https://github.com/FremyCompany/css-grid-polyfill/ https://github.com/FremyCompany/css-grid-polyfill/ It ain't perfect, but it works pretty decently.
- Twisol 10y agoThis is really nice! It pegs my CPU something awful though -- Firefox 52 on a mid-2014 Macbook Pro.
- welpwelp 10y agoIs 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 10y agoKinda, 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.
- Honzo 10y agoWhy wouldn't grid-column-start/end be zero indexed?
- Honzo 10y agoAh 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 10y agoYou'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.
- pidg 10y agoNice 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!
- chme 10y agoI am not a web developer and this kind of grid addressing bewildered me too. 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 10y agoUnfortunately it's somewhat consistent with the rest of css (e.g. padding is top left bottom right)
- judah 10y agoSmall correction: padding is top right bottom left. In other words, clockwise.
- irishsultan 10y agoMakes more sense, I always forget, which is why I looked it up, but apparently I either misread something or I can't remember it for longer than 2 or 3 seconds.
- cr0sh 10y agoI 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...
- legulere 10y agoLevel 21 was pretty hard for me. It lacked the explanation that fr goes from 0 to 100 like %.
- irishsultan 10y agoBecause 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 10y agoYeah, 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.
- jumasheff 10y agoI'm stuck in there. Can you give a hint? Thank you ))
- bigbugbag 10y agoyou need a total of 5 columns, first and last one are 50px large.
- deleted 10y ago[deleted]
- kiflay 10y agoit will be great if you can provide answers for each question as well. specifically for the higher levels.
- bigbugbag 10y agoit 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.
- kppisgpp 10y agoccoolll
- selbekk 10y agoLove this game - can't wait to start using this in production - in about two-three years ^^
- pjmlp 10y ago"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.
- lucasmullens 10y agoI'm sure there's a polyfill, or if not one will be made soon enough.
- pjmlp 10y agoAssuming it gets the green light from customer's legal team and IT.
- lucideer 10y agohttp://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 10y ago> pre-11 versions are <<1% these days I wish, I guess you don't do much enterprise intranets.
- lucideer 10y agoI'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.
- stigi 10y agoI love how the name resembles the classic http://csszengarden.com http://csszengarden.com
- Kezako 10y agoThere 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 10y agoThe grid spec has something kind of similar through defining "regions". It's been a godsend.
- clishem 10y agoI 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 10y agoI 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 10y agoYup 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 10y agoIncreasing the contrast on hover might do the trick.
- enugu 10y agoIs 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 10y agoI 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 10y agoThanks. 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 10y agoIts 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.
- smpetrey 10y agoSo the moment everyone hops on Flex-Box, CSS Grid becomes the next hot take now huh?
- ahoy 10y agoThey work well together. Grid doesn't replace flexbox.
- EamonnMR 10y agoThis 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.)
- chasing 10y agoVery nice! Works as advertised. ;-)
- ajross 10y agoImmediate 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?
- splicer 10y agohttps://xkcd.com/163/ https://xkcd.com/163/
- wnevets 10y ago> 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 10y agoTrue 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 10y agoWhat is your concern? Code beauty? What kind of programmer can't deal with converting between 0 and 1 based arrays?
- Risord 10y ago
- weavie 10y agoHuh? I was only just starting to get used to flexbox. Are CSS grids meant to be a replacement/alternative/addition to flexbox?
- ahoy 10y agoNot 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.
- nvdk 10y agoUgh 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.
- philh 10y agoThis 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 10y agoAgreed. 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 10y agoThe 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.
- kiflay 10y agoawesome. 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.
- redsummer 10y agoHaven'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 10y agosame guy — http://flexboxfroggy.com http://flexboxfroggy.com
- sultanofsaltin 10y agoWell that was fun! The last level took me a couple minutes (maybe have brute forced the prior fr example).
- suyash 10y agoUnfortunately it's totally broken, on latest Safari and it says download new version of Safari to work.
- ArlenBales 10y agoI 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.
- cr0sh 10y agoFirst 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 10y agoFrom 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.
- danadam 10y ago#DDDDDD on #AAAAAA Ever heard of this thing called "contrast"? Could use some.
- JCzynski 10y agoNo, it's working as intended.
- pc2g4d 10y ago`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 10y agoThe 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.
- julie1 10y agowahou the Tk grid manager is back again. Rule#1 of GUI every geometry manager will reinvent Tk/Tcl poorly saying it is crap.
- darth_mastah 10y agoVery good work, the Grid Garden. As a side note, I find the grid API confusing as well.
- codyb 10y agoI'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.
- deleted 10y ago[deleted]
- deleted 10y ago[deleted]
- trippo 10y agotest