return to table of content

Learn CSS Grid with a virtual garden game

renegade-otter
9 replies
5h21m

I've always found this Rachel Andrews series a superb learning source: https://www.smashingmagazine.com/2020/01/understanding-css-g...

For someone such as myself, doing backend, this gave me a solid foundation for building modern UI apps while keeping them lean and simple.

No Bootstraps, no Tailwinds.

lghh
7 replies
3h14m

While Bootstrap certainly abstracts CSS away for you in a way that you can get by without knowing much about CSS (for simple things), Tailwind is just tokenized CSS. You can't use Tailwind without knowing CSS or learning CSS in the process.

That feels pretty lean and simple to me.

squidbeak
5 replies
2h59m

The problem with tailwind is it does away with separation of concerns and messes up HTML, like the old styling tags in HTML. We moved on from those for good reasons.

christophilus
4 replies
2h8m

It really isn’t the same as inline styles at all. It’s the best of both worlds, in my opinion. It’s hard to see myself ever going back to the old ways.

nawgz
1 replies
2h1m

It's the exact same as inline styles...

foco_tubi
0 replies
1h51m

it's really not - utility classes avoid specificity conflicts and enforces a consistent design system as defined in the Tailwind config.

bromuro
1 replies
59m

I have given a chance to Tailwind and it was neither nice or easy. I actually give up, wondering why my younger colleagues appreciate writing CSS using class names.

I write CSS since its debut. Clearly it wasn’t enough suffering: they reimplemented it as a class-name based language - with horrible IDE support. I am perplexed - I must be the boomer around here… :)

andrei_says_
0 replies
43m

I think it makes sense when writing css for isolated components - usually ignoring the cascade. Makes it possible to not name things which is a plus in componentworld.

The thing is, it’s the cascade that makes css as powerful and elegant as it is.

And not naming the things comes at the cost of listing all css properties as classes on each element.

I write CSS and must say that in 2024 CSS is an amazingly powerful and elegant language.

If one is willing / given the time to learn it.

Using conventions like ITCSS, a few libraries like https://utopia.fyi and placing colors, font sizes and spacing into variables + the use of a few utility classes provide most of the conveniences of a utility-first framework with no downsides.

I can also see how devs focusing on components prefer utility-first frameworks for the speed of development. Despite the low maintainability and the horrible markup.

alwillis
0 replies
2h31m

You can't use Tailwind without knowing CSS or learning CSS in the process.

Disagree. Tailwind abstracts lots of CSS away; you can get away with using it with only having a surface level understanding of CSS.

As we know, a little knowledge can be a dangerous thing, especially in web development.

sandreas
6 replies
14h15m

While this game is quite nice and fun to play, I find it kind of tempting to just experiment with the values until you solve the current problem instead of focussing on the "How does it really work" aspect of the problem, which would lead to a deeper understanding...

One way to solve this could be to allow more freedom in solving the problem as well as a small penalty on more than 2 or 3 tries.

martini333
4 replies
11h25m

You can't blame the game for your own discipline.

infogulch
1 replies
10h33m

Yes you can.

Giving players so much freedom that they can easily identify and execute a grindy, brute-force but boring strategy is an extremely common problem in game design. Fault is irrelevant, it is the game's problem if the player stops having fun because they got trapped in a psychological pit tying to circumvent the rules when playing by the rules is ultimately easier.

This is a tradeoff so requires some balance, but OP's suggestion is simple, unobtrusive, and probably effective.

cubefox
0 replies
6h7m

Exactly. That's also the same reason why a game being too easy is the game's fault. One could object that players should be more disciplined and intentionally forego (e.g.) the stronger weapons in the game. But part of the fun of playing the game is to try to get the best possible weapon. Similarly, it is little fun to play e.g. tennis or chess against a weak opponent. Either it is too easy, or you don't give your best, neither of which is particularly fun.

louthy
0 replies
6h9m

The whole purpose of a game is to complete a goal. Good games gamify you to achieving that goal. If the goal is to learn CSS and the game hasn't guided you to achieve that goal then it's failing at its purpose. Blaming the player for not playing correctly is an unbelievably bad take. The mechanics of the game should punish the user for doing the 'wrong' thing and reward them for doing the 'right' thing.

fortzi
0 replies
11h4m

It’s not about assigning blame, it’s about encouraging the kind of player behavior that will lead to better learning

FireInsight
0 replies
4h51m

I write frontend code and especially with CSS it's always trial-and-error, "bruteforcing" as you describe it. Sometimes you just gotta play with it until it works, while utilizing what you've learned from the previous times whacking at similar problems.

cudder
6 replies
13h17m

Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate:

    grid-template-rows: repeat(4, 10px) 1fr;

buzer
2 replies
13h4m

You are watering everything except for top 40 pixels. You need to water everything except for top 50 pixels.

p0seidon
1 replies
11h44m

Gone are the beautiful days of <table> layouts.

aniforprez
0 replies
8h33m

And I'm so thankful. Table layouts are horribly restrictive and opinionated with all sorts of arcane under-the-hood rendering rules making simple things like fixing the width of your columns not work at all. Grid is better except obviously if you're rendering an actual table

j1br
0 replies
11h55m

grid-template-columns: 50px repeat(3, 1fr) 50px;

friendzis
0 replies
10h55m

Neat (or not, depending on your position) thing about grids is that they allow for zero-size areas.

With your approach you need 4 rows with the size of 50px/4=12.5px:

`grid-template-rows: repeat(4, 12.5px) 1fr;`

However, you can also "size" first (or any other "nice" number) of rows and insert zero-sized fluff areas:

`grid-template-rows: 50px repeat(3, 0px) 1fr;`

baq
0 replies
11h1m

   12.5px

bluelightning2k
6 replies
7h28m

I did this and enjoyed it.

Maybe I'm getting old but I just use flexbox every time. Makes me very "meh" about CSS grid.

Grevling
1 replies
6h46m

Flexbox is simpler and covers most use cases. No need to go grid unless there is a special need.

alwillis
0 replies
2h37m

Flexbox is simpler and covers most use cases.

CSS Grid was the first specification for page layout using rows and columns (grids) since the creation of the web. Everything else prior was a compromise.

Flexbox is for laying out rows or columns; while you can do some limited page layout, that's not what it's designed for. Just like tables and floats weren't designed for page layout either.

Another way to grok this: CSS Grid is for two dimensional layout and Flexbox is for one dimensional layout.

Flexbox and CSS Grid were designed to work together, each doing what it was designed to do.

ramesh31
0 replies
4h1m

Maybe I'm getting old but I just use flexbox every time. Makes me very "meh" about CSS grid.

Grid is the wrong choice 99% of the time, but 1% of the time it will save you a ton of effort. Fixed navbars come to mind.

ponytech
0 replies
5h24m

Maybe I'm getting old but I just use HTML tables every time. :-D

micromacrofoot
0 replies
1h24m

Flexbox generally tends to be great for a single row/column layout, grid excels at multicolumn/row (especially considering subgrid)

One of the most useful features of grid that replaces flexbox, in my experience, is auto-fit and auto-fill, which are great for "card" style layouts. You can use flexbox for these, but the treatment of wrapping items in non-full rows was always a point of frustration for me. This is even better if you can utilize subgrid to align the card contents.

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...

lenkite
0 replies
5h29m

Grid definitely requires a bit more up-front thinking. With flexbox, you can code and then change in stream-of-consciousness coding.

spyrosk
3 replies
7h35m

For a moment I thought this was about https://csszengarden.com/pages/about/

(A long time ago) it was an amazing source to learn CSS, and get design inspiration.

rimliu
2 replies
7h23m

I still consider those years to be the golden years of the web development. When the fruits of web standards movement started to appear. Alas, then came react and all the good stuff was thrown out of the window. I guess tag soup is palatable, when it is buried deep in node_modules.

georgesimon
0 replies
3h21m

Nowadays, I think the opposite. I feel a pang of jealousy and regret when I load a page from before CSS Zen Garden that uses tables for layouts. It still exists and works perfectly. I love how I can automatically date it in my mind, like period furniture or buildings. Unlike the thousands of pages that I made at the time, which are either gone or broken. I yearn for the html files that I lovingly handcrafted as unique pages. I destroyed them myself so that they could use a one-size-fits-all CSS solution. And they could in turn destroy each other with each new site redesign. If I ever get back on the indieweb, I'll be creating each page as a single file and allowing them to age gracefully.

bromuro
0 replies
34m

Golden years ? I do remember spending nights without sleep against browsers and their CSS support.

j16sdiz
2 replies
14h14m

Some random note:

1. Good: The answer is verified by checking the absolute position. You can pass the level with any valid answer -- including non-grid variant.

2. Ugly: It send google analytics for every attempt.

rezonant
1 replies
9h16m

re (1): Indeed, I think we all agree that "position: relative; left: 31.4em;" is a solid solution to the first challenge.

bluelightning2k
0 replies
7h30m

This made me laugh. Well deserved upvote for you.

nawgz
1 replies
1h58m

I dislike CSS Grid because it takes away almost all the semantic of the HTML. Flexbox at least means your HTML tree corresponds to some kind of structure on the page, CSS Grid means you see this

<div class="GridParent"> <-! random amount of divs without classnames --> </div>

And you're suddenly required to cross reference CSS to make sense of what's on the page. It's just ugly, even if it is wildly effective.

kmoser
0 replies
42m

Different topic, but this could be solved if somebody wrote an IDE that understood all the relationships between your HTML and CSS and let you manipulate it visually, rather than having to manually cross-reference symbols.

dsego
1 replies
11h26m

This and flexbox froggy are great to dive into css layouts in a fun way.

JW_00000
0 replies
8h44m

The website links to Flexbox Froggy but via a link that requires you to register an account, but you can access it directly via https://flexboxfroggy.com/

aniforprez
1 replies
8h34m

Honestly the game is kind of disappointingly surface level. It spends far too much time trying to exercise your knowledge of template columns and grid start/end but not enough to explain way more other features. No lessons about colspan, minmax, autoflow, gap, column names, subgrid and much more. I found flex to not fit a usecase I was working with so decided to use the website to learn about grid and I was pretty unamused to find out how little it actually teaches you

cubefox
0 replies
5h10m

This is an old game from a time when CSS Grid was new, so they just focused on the basics. Nowadays you can probably assume that most CSS users are somewhat familiar with basic CSS Grid already, so a game which covers the advanced features would make more sense.

willio58
0 replies
1h18m

I used to work at a place where weekly we'd have a show-and-tell with the team for about 30 minutes. One week I brought this and I let people who don't code give answers to see how far we'd get. It's interesting to see some who "got it" and others who struggled.

Overall people loved it! I think it was a great way to develop some basic programming skills in people who would otherwise never code in their entire life. For years after I did this my coworkers would bring it up as kind of a "You do _that_ all day?", which I thought was funny because this is like the easiest part of my job and they thought I was a magician for it but it was nice to see they respected the work more because they did it themselves a little once.

ulrischa
0 replies
7h19m

Named template areas are missing. This is the most interesting feature in my opinion for responsive design. Should be in the game

thrusong
0 replies
48m

I really enjoyed Flexbox Froggy and felt like it helped me a lot better than Grid Garden. Maybe my brain just isn't a grid-oriented brain— CSS Grid never seems to stick.

tbm57
0 replies
2h54m

i thought this was excellent. very engaging way to quickly learn a useful tool

lovegrenoble
0 replies
4h8m

This one can also be useful for anyone struggling with Flexbox: https://flexboxcss.com

hoherd
0 replies
4h59m

I was hoping this would help me find a good solution to some small, simple web frontend thing I've been working on. Instead, after playing the first 10 levels, I just hate CSS more.

esonica
0 replies
11h49m

I enjoyed it, good refresher on CSS grids, thanks for sharing

baobabKoodaa
0 replies
2h32m

I don't recommend spending time on this. It doesn't teach you the right things. The problems you'll be solving in this "game" do not relate to the problems you actually need to solve when you actually need to do something with CSS Grid.

Waterluvian
0 replies
2h3m

I thought Flexbox was a CSS gamechanger and then came Grid, which is so amazing and predictible.

Really, the only pain I have left with CSS is when I get into weird cases of "I want a component to use up any remaining space that its siblings don't use, but one of its children should use up everything it gets that its siblings don't use, and then overflow scroll if there's not enough space."

There's a whole bunch of cases where I find these weird interactions between flexbox and grid and some sort of priority for sizing layout that I don't quite understand. I suspect this is mostly on me, but it's something that, unlike flexbox and grid, still feels not straightforward.