TL;DR: CSS Grid and Flexbox are the nuts.
I have been a frontend developer for around 4 years.
I fell into it by accident and was initially a bit disgruntled that I wasn’t doing ‘proper’ software development (you know, databases, servers and all that).
That soon changed after I realised how bat shit complex and interesting the frontend layer of modern applications has become.
But until recently I still had a bit of a mental block about/pure hatred of CSS.
I told myself I was better suited to the lovely logical land of frontend data architectures (one way data flow, redux), unit testing, integration testing, TypeScript, RxJS, e2e testing, frontend ‘devops’ (messing around with build servers… definitely not an expert) and so on. Basically anything and everything that my job involved other than CSS.
I was on board with CSS related to styling and colouring/shaping/animating things, but the layout stuff felt fundamentally broken and hacky, and really pissed me off.
As a result I greedily grabbed any weird abstraction on top of CSS, ideally one that let me write JavaScript, and used that instead (styled components in React, Bootstrap for everything else).
And I was pretty happy.
Every now and again I would be unable to do something, or something would break and I wouldn’t understand why, but I told myself it was just that CSS was stupid and broken and I could leave that pixel pushing stuff to someone else in the team.
Obviously I was wrong, and fortunately enough of my colleagues told me I was wrong that I finally ripped off the band aid and starting using CSS proper (well SASS, but that’s another story…).
While I do think that Bootstrap in particular filled a very real need for a while (centering divs for one), it turned out that CSS has quietly moved on and seen some improvements which make it far more suitable for building modern UIs.
Enter CSS Grid and Flexbox
These two additions to CSS basically solve all of the things related to layout that previously drove me mad.
You can now write fluid layouts that flow about the page in a sensible way at different sizes, based on a simple set of rules.
You can also, using just CSS, totally change the order in which things are rendered on the screen and the layout, without changing the order of your semantic markup (and also without adding a gazillion divs).
So now, finally, your CSS is purely responsible for styling your content (including laying it out on the page) and your HTML is purely responsible for the content itself.
Miraculous!
All i will say is that, as with most new things, there is a bunch of weird terminology you have to learn first. It is slightly painful but worth doing. I’m not going to go into any more detail on these two features, as honestly a bunch of other people have done a far better job:
Grid resources
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://css-tricks.com/snippets/css/complete-guide-grid/
Flexbox resources
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Enough of your gabbing, what does it look like!?!
To play around more heavily with grid in particular, I put together a crappy little project to try and replicate this slice of 90s joy https://www.spacejam.com/archive/spacejam/movie/jam.htm for the modern mobile first age.
I’ve inventively called it spice jam to avoid being sued https://github.com/robt1019/space-jam-2.0 and used a bunch of free for reuse svgs from the internet to play around with the layout.
I’ve basically treated it as a proof of concept for myself, and it is far from functional, but for anyone interested in seeing how powerful grid can be in entirely separating your markup from the way it is rendered, I think it could be a helpful example/playground to mess around in.