
Gridgarden: A cool game to learn CSS Grid - mikepechadotcom
http://www.cssgridgarden.com
======
macando
Outstanding. 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
css diner: [https://flukeout.github.io/](https://flukeout.github.io/)

~~~
macando
This is awesome! Clearing some of the challenges without having to Google for
the right selector feels good =) Congrats to whomever made it.

~~~
aloisdg
If you don't know how to contact the author, open an issue to say thank you.
FOSS developers don't get enough love.

~~~
macando
I've just done it. You're right.

------
dmix
CSS 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.

~~~
playpause
You make it sound like CSS Grids is a replacement for flexbox. They each solve
very different problems, and they complement each other.

~~~
acdanger
Can you outline what problems each is trying to solve? I end up using each
seemingly interchangeably quite often.

~~~
Vanderson
Flex:

1\. For unknown number of items in one direction. (toolbar of buttons works
better in flex)

2\. Row-wrapping items. (ie, the unknown number of items need to flow with the
screen, grid _stinks_ horrible at this)

Grid:

1\. Specific forced number of columns but unknown number of rows (the control
is the ultimate, flexbox still does some loosey-goosey stuff where grid stays
put). Also, when I know exactly what I want and where it will go and there is
no ambiguity about it, grid is perfect. Rows are implicit (ie, any number of
rows) This makes clean form building a dream...

2\. Specific layout with areas. Think header, columns, footer all part of a
unified design. Way, easier in grid than in flexbox.

Grid has grid-gap, which is vital for making some layouts easy. Flex only has
grid-gap in Firefox, so you are stuck with flippin margins for item spacing in
flexbox still, yuck.

~~~
bobthepanda
To add onto point 2, areas are _really_ powerful, because it makes changing
layout based on screen width really easy.

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

~~~
Vanderson
Microsoft 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...](https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-
browser-so-stop-using-it-as-your-default/)

[1] [https://techcommunity.microsoft.com/t5/Windows-IT-Pro-
Blog/T...](https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-
perils-of-using-Internet-Explorer-as-your-default-browser/ba-p/331732)

~~~
brailsafe
Graceful degradation.

~~~
Vanderson
Thank you. I guess I always considered that a phrase regarding features where
a browser doesn't have a feature yet, but will in the future. But I guess it
works well for the other direction as well.

(ie, a browser that will never have any new features)

~~~
brailsafe
That's progressive enhancement.

Progressive Enhancement: Starting from some baseline, ideally static content,
and building in features that newer, usually visual browsers can support

Graceful degradation: What happens if things don't work perfectly, or some
browser doesn't support a feature, or network connectivity is shit so your js
file doesn't load.

------
sireat
I 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
Yes! 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
Since 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
I don’t know why that didn’t occur to me. Thanks.

------
jplayer01
Tried 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
This 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.

------
wilsmex
I 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
Great 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.

------
lacampbell
I learned flexbox since I thought... well you were supposed to. Should I have
been using grid all along?

------
jamesholden
This is great! I know ZERO about CSS grid, but this taught me something and
very straightforwardly.

------
edem
This is great. There is also Flexbox Froggy if anyone is interested:
[https://codepip.com/games/flexbox-froggy/](https://codepip.com/games/flexbox-
froggy/)

------
chrisdew
Great game, but does grid display use 1-based numbering?

------
lsalvatore
I 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.

