21–30 of 72 posts
Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify. CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.
It’s fashionable to crap on tailwind in some css circles but nothing else has improved my CSS knowledge so quickly - it’s specifically when used with the tailwind plugin in vscode, it shows the underlying css in popups and it’s addictive to guess what the underlying css will be for a given utility class and then quickly check. That said, flexbox froggy and the other grid garden game were fun. Also find myself regular…
Fun fact: border-radius wasn't supported well until one year (2010) before Bootstrap (2011) was first released. You had to do rounded corners with some annoying background-image hacks.
Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify. CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.
Haha USB-C solves this for cables. What would be the analog for page style?
Actually though, not really an analog, but surprisingly something not many people are aware enough of - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...
Helps a lot when working with applications that need to support both LTR and RTL languages.
Question from a CSS noob, When would you use Flexbox vs Grid?
- You can align things in 2D space, not just along a single axis (like flex). Great for the top level layout of a site/UI.
- You can have white space. I often create white space (empty grid cell) in my UI so I can add UI elements there if needed later on. Works well with elements that are conditionally rendered, as these will change flex layouts but elements assigned to a grid cell will not move.
Other interesting games for learning CSS, https://cssgridgarden.com/ (basically Froggy for Grid) https://cssbattle.dev/ (a platform for doing various challenges, huge community) https://flukeout.github.io/ (learn about CSS selectors) https://css-animations.io/ (practice CSS animations)
Love Flexbox Froggy. I would wager that an entire generation of developers learned flexbox from this website. I certainly did.
Amazing educational tool.
Doesn’t matter how many years I work with CSS, I will always confuse flex things like align-content and align-items, like inserting a USB cable wrongly, every single time. Oh and align vs justify. CSS grid is incredible too. I can’t believe how spoiled we are now with amazing layout options.
I don’t know if that’s the only reason, so I’m not gonna say it was a bad choice. But at least to me, I’m exactly like you in the sense that I can’t remember which one is which. I would have preferred either better naming that references the axis, or simply have the attributes be independent of the parent. Until then, I have to use a cheat sheet.
Question from a CSS noob, When would you use Flexbox vs Grid?
So if you wanted, you could just use Grid... although Flexbox could be considered slightly more striaghtforward for 1D stuff.
This is very useful. I always end up Googling vertical align for flexbox. In a rush, what would help me refresh flexbox knowledge is being able to drag and drop the frog, snapped to a 3x3 grid, and get the flexbox CSS code as output. Still a very thoughtful tutorial. (EDIT: The reason I said the above is I've personally given up on keeping up with new CSS stuff. Having written CSS off and on since IE7 days, basically…
No tricks anymore, not much to keep up, flexbox and grid are the end-game. And for most UI cases flexbox is all you need, it's basically stack/group (or vbox/hbox), so you can arrange items vertically or horizontally. Learn flexbox, it's the most useful thing for layouts that's come to css, and it's really simple, there are options for spacing (gap), justify and align, that's pretty much 99% of cases right there.
I’ve found that grids are a little easier to maintain a flat hierarchy and avoid complexity, but the downside is it also doesn’t modularize that well – you need to compose all the cells together, some of which probably should belong in a child “component”.