8 ms·
Gridgarden: A cool game to learn CSS Grid
- macando 7y agoOutstanding. I learned the Flex layout by playing this simple game: https://flexboxfroggy.com/ https://flexboxfroggy.com/ (from the same author I believe). I wonder if there are examples of learning through playing a game that are as effective as these two.
- aloisdg 7y agocss diner: https://flukeout.github.io/ https://flukeout.github.io/
- macando 7y agoThis is awesome! Clearing some of the challenges without having to Google for the right selector feels good =) Congrats to whomever made it.
- mikepechadotcom 7y agoSo did I. Two awesome games.
- amenghra 7y agohttp://www.flexboxdefense.com/ http://www.flexboxdefense.com/ is great too. Very similar look and feel as flexboxfroggy.
- JasonLABS 7y agoI'm excited to come across these! Learning through gaming is great. This is how I was able to get as far as I have using VIM: https://vim-adventures.com/ https://vim-adventures.com/ I hope there are more out there!
- simcop2387 7y agoSlime forest adventure has somewhat worked for me in the past as a flashcard game for Japanese. https://lrnj.com/ https://lrnj.com/
- smexy 7y agoIve also been a big fan of these 2 games. Theres severel more coding games by the sam makers here. https://codepip.com https://codepip.com
- deleted 7y ago[deleted]
- dmix 7y agoCSS Grid still blows my mind. A syntax that actually makes sense for a visual styling language in CSS? People like to make fun of Javascript but CSS doesn't get enough heat. It was absolutely awful and still is in many ways. Even Flexbox is a convoluted mess with a strange naming scheme. CSS Grids just makes so much more sense intuitively for what it's trying to do.
- duxup 7y agoWas CSS even "meant" for layout initially? To me Flexbox is still pretty natural. Names might be weird but there's not a great deal to know and it was the first CSS layout that actually IMO checked enough boxes not to be maddening.
- crispyambulance 7y agoCSS was originally intended as some kind of general-purpose document layout mechanism. It sucked at that at the beginning and ESPECIALLY sucked at web-application layout. Admittedly, part of the reason was because browser-makers would not play nice together and with standards. Meanwhile, desktop application developers have ALWAYS enjoyed decent, predictable layout mechanisms. It is so frustrating that it took the web-based world 2 decades to get their shit together. CSS-grid is built into the CSS standard itself and should have been there from the beginning. It took way too long, but I am glad it's here now.
- irrational 7y agoI blame microsoft. I still can't believe they disbanded the IE team once IE6 had a stranglehold on the browser market.
- playpause 7y agoYou make it sound like CSS Grids is a replacement for flexbox. They each solve very different problems, and they complement each other.
- 7y ago
- paul7986 7y agoI work in government which is pretty modern but there are users who still use Ie 11. It looks like IE11 doesn't have full support for flex box or css garden..is that correct?
- fourthark 7y agoFlexbox: "Partial support is due to large number of bugs present" https://caniuse.com/#search=flexbox https://caniuse.com/#search=flexbox Grid: "Partial support in IE refers to supporting an older version of the specification" https://caniuse.com/#search=grid https://caniuse.com/#search=grid IIRC IE implemented Grid first but their spec had enough problems that the standard isn't much like it.
- fma 7y agoIm not a UI dev but for my basic stuff I stuck with bootstrap since it supports every browser for positioning.
- bobthepanda 7y agobootstrap 5 is dropping IE support: https://github.com/twbs/bootstrap/pull/23586 https://github.com/twbs/bootstrap/pull/23586
- andrei_says_ 7y agoI use Suzy grids 2 for ie and everything above and it works great.
- Vanderson 7y agoMicrosoft doesn't consider IE a browser anymore, they call it a "compatibility solution"[0][1]. If a site looks bad in IE, I think that is ok these days. (functional but ugly, is there an industry phrase to encapsulate this idea?) IE 11 was released 5 year ago... [0] https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/ https://www.zdnet.com/article/microsoft-security-chief-ie-is... [1] https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-perils-of-using-Internet-Explorer-as-your-default-browser/ba-p/331732 https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/T...
- wilsmex 7y agoI did a pretty popular comprehensive video tutorial on CSS grid: https://www.youtube.com/watch?v=SPFDLHNm5KQ https://www.youtube.com/watch?v=SPFDLHNm5KQ Best 40 minutes you'll spend if you want to learn CSS Grid! :) First 5 mins are a bit of history, with grid starting at the 5 min. mark.
- orange8 7y agoGreat work with the tutorial. One question though, aren't flexbox and grid supposed to be complementary systems? The history part seems to suggest that css grid is the next step in the evolution, or an improvement over flex.
- sireat 7y agoI am still amazed CSS Grid named areas are not used more often. To me the named areas are the first time that CSS layout makes sense and I first did layouts in tables in the late 90s.
- IggleSniggle 7y agoYes! Named areas are the best! The thing I can never decide is whether to use descriptive names or stick to single letter (since single letter helps visually clarify the intended layout)
- bobthepanda 7y agoSince CSS isn't really space-sensitive, you could just pad unevenly matched names with spaces, and then layout should be reasonably clear in any standard monospaced text editor.
- IggleSniggle 7y agoI don’t know why that didn’t occur to me. Thanks.
- jplayer01 7y agoTried this and their froggy game a few months ago. I thought it was cool, but I felt it didn't translate well into the real-world. I still have significant issues figuring out how to do layouts in CSS and I still hate trying to do so.
- macando 7y agoThis is completely normal. Flexible layouts in any UI system are difficult. I was surprised that the authors of all the popular CSS books and courses usually skip or barely cover that part. Apparently they know it's a topic difficult to explain with short snippets of CSS and HTML. Too many moving parts, especially with dynamic content. In the end, you learn by doing it.
- lsalvatore 7y agoI created a CSS Grid course on Udemy at https://www.udemy.com/css-grid-with-react/ https://www.udemy.com/css-grid-with-react/. My goal was to use it to build an Instagram web app clone. What I learned was that a lot of the features are really cool to play with but many lack practical use cases, its strong suit being its ability to go in both row and column directions. However despite trying I couldn't think of any use-case for configuring rows (going vertically). I found the grid-template-columns to be most useful, but the grid-area feels fairly gimmicky, as if you were building a quilt. Perhaps for a dashboard application. Overall, I just use flexbox now, even though CSS Grid has a cleaner API.
- lacampbell 7y agoI learned flexbox since I thought... well you were supposed to. Should I have been using grid all along?
- jamesholden 7y agoThis is great! I know ZERO about CSS grid, but this taught me something and very straightforwardly.
- chrisdew 7y agoGreat game, but does grid display use 1-based numbering?
- edem 7y agoThis is great. There is also Flexbox Froggy if anyone is interested: https://codepip.com/games/flexbox-froggy/ https://codepip.com/games/flexbox-froggy/