To any of you CSS pros out there, you are worth your weight in gold. I'm a Senior Frontend dev and still struggle with it.

I'm really good at CSS, it's almost like a toy for me it's so easy. Part of it comes from my background in graphic design.

At work though, nobody wants to listen to me when I explain how they can make the style do the thing they're writing JavaScript for.

They made me a backend engineer. It's ok though, I like the work, still salty as fuck about it when they fuck up the styling though.

It's like watching a child play a game for the first time while you have played it for 30 years and know all the secrets.

@sariel Hahaha, yeah I'd be the one you would look at like, wtf is wrong with you. JavaScript is my hammer so everything is a nail but to be honest, I do try to find css avenues first as I see that css can be very powerful and performant. I apologize for those of us who just want to hammer everything, hahaha.

@tragicwhale sounds like you may at least try. These guys I work with just ignore me.

If only they knew 😂

Then again, if I was doing frontend stuff I would probably be getting paid more 🤔

@rEaL-jAsE THATS WHAT I'M ASKING, LIKE WTF, HOW IS CSS HARD

@rEaL-jAsE @Marl3x Hey, if you guys are big king dingalings on css, good for you. I just find the stuff like clamps, maxmin, etc not necessarily intuitive.

@rEaL-jAsE Ha, no worries, I didn't think you were, just strangers tone lost in translation.

CSS is a love-hate thing to me. I'm really good at it, but the pain sometimes... CSS-Grid is the true MVP and savior of frond-end!

@PonySlaystation could you give a few examples of where/ how CSS grid really shines? I'm good at all the other display types so I just haven't bothered with it yet apart from completing the grid farm puzzle. Is "less HTML required to achieve the same" characteristic of it? Is It more suitable for specific use cases or for anything but flow text?

@webketje Great questions!
I use it from outer layout definitions down to smaller parts like input components, buttons and the like.
The absolute biggest advantage is centering / aligning content and simultaneously being able to mitigate overflow problems. It's perfect for responsive web design!
Take 1-2 hours and work through this guide: https://css-tricks.com/snippets/...
It will be worth your time 😎
I use this site as my go to docs for grid.

Here is the analog for flex, also a great link: https://css-tricks.com/snippets/...

I mainly use Grid for layouting and as long as the amount of elements to place within is more or less known. If I dont know how many children I want to place and have auto flow, flex is the way to go.

One important thing:
Do not use "display: grid;" (or flex) on a direct child of a "display: grid;" (or flex) element. It is important to separate the conainer and its direct children. Just use one div for the children and then somewhere within you can use grid or flex again. The reason is that grid directly within a grid container can result in weird sideeffects due to the placing algorithm having trouble to decide what to place where and in what size

@webketje I have the add that grid and flex can handle responsive sizing based on their content (e.g. some text) and allow the grid or flex's content to freely expand vertically or to the side and thus move other content of the layout as well (responsive).
Before grid, I had to use either table tricks or some position absolute combined with JS hacks to achieve the same responsive behavior.
Grid is basically like the table but wayyyy more advanced and with less tags (now row tags) and you can have autoplacement decided by the browser, depending on what space is available in your grid.