Hacker News Reader

Comment by slhck | Hacker News Reader

As someone who only needs to use Flexbox/Grid every once in a while, this is precisely what I needed.

I've been struggling with static documentation like the one from Tailwind [1] or MDN [2]. Writing good and intuitive documentation is hard, surely this must have been quite an effort.

[1]: https://tailwindcss.com/docs/flex-direction

[2]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

View on HN

For Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is the resource I would recommend, along with https://flexboxfroggy.com/ for a more interactive tutorial.

For CSS Grid, the equivalent resources would be https://css-tricks.com/snippets/css/complete-guide-grid/ and https://cssgridgarden.com/

These are all tutorial-level documentation. Once you've gone through those you can complement them with the MDN documentation on the individual properties as a reference.

Upvote for https://flexboxfroggy.com/ and https://cssgridgarden.com/ for grid

I can't recommend the css tricks guide enough. I don't write enough css to know the properties by heart but with this resource it is easy to find quickly the property you need.

Yeah, I have both of those bookmarked myself. I know they sell posters of the articles. I've always wanted to get them, though they're a tad pricey. But I guess I can write it off as a business expense…

I wonder how many hits that article has. It must be one of the most visited development-related articles on the web.

Ah I came here to recommend Flexbox Froggy and Grid Garden! I didn't come across them until long after I needed them, which is really a tragedy, but I try to rectify it by linking them to everyone I come across who is learning css (which is a lot of people due to some Discords I'm in). They're adorable and wonderful, and if you don't use css frequently enough to keep the properties memorized, but do use it enough that it would be convenient to be slightly more familiar than needing to re-google constantly I recommend re-playing them once a year or so; they're honestly pretty fun just because they're so cute.

For CSS layout related stuff, I think video tutorials are a really good resource. In particular I like Kevin Powell who has guides on both subjects.

For Tailwind I put together "Tailwind Toucan" on my side project https://codeamigo.dev/lessons/243. Warning: it touches on more than flexbox.

Maybe more introductory than you're looking for, but I went through this once a few years ago and its stuck ever since: https://flexboxfroggy.com/

Now I just need one for Grid.

Here you go https://cssgridgarden.com/

As far as I'm concerned, Flexbox Froggy is mandatory reading for anyone completely baffled by flexbox. It's really brilliant.

CSS grid is heaps more complex than the flexbox spec, so I think the Grid Garden one is not quite as useful. But seriously – if anyone is just squinting when staring at flexbox stuff, go check out that game.

I thought it was just me struggling with the tailwind flex docs...

Reply on news.ycombinator.com