IMO CSS Grid is actually much simpler and better designed than Flexbox. I’d recommend taking a proper look when you get a chance.

The solve different problems.

This is the kind of HN comment I come for in these kinds of threads. One person saying one thing (CSS Grid is the one thing keeping me sane!) Another person coming in to say the exact opposite.

I'll be a little more helpful since I wrote a one liner without really explaining anything...

One explanation people like to give is:

CSS Grid is for layouts in 2 dimensions, Flexbox is for layouts along one dimension.

Which can be confusing because you absolutely can use Grid for layouts along one dimension too.

Here is my stupid sounding rule of thumb that I think is more useful: If you want a grid layout use grid, if you want a flexible layout use flexbox.

Grid quite literally splits the area into a grid but what if you want to just say "I want these two elements to be as far apart as possible within the container they are in" (ie a navbar, you want the logo on the left about 20 pixels away from the left of the viewpoert and you want the actual navigation to be on the right with the rightmost element 20px away from the right of the viewport). Flexbox is better for that.

I do often end up using Flexbox for 1-dimensional layouts, but IMO Grid's fr units are a lot more intuitive than Flexbox's combination of flex-basis/flex-grow/flex-shrink. If CSS added a 1-dimensional layout mode based on these principles then I'd switch to it in a heartbeat.

(I'm considering proposing one myself).

What bugs me the most is Flex centering absolutely sucks at handling overflow. Have a flex box with content that is supposed to be centered? Great, looks perfect for the first few items. But then try it on a smaller window or with more items and the content overflowing to the left of the border will be entirely inaccessible.

Allowing scrolling both ways would have been perfect. Switching to left-aligned when content overflows would be acceptable. But completely prohibiting access to half the content when an overflow occurs? Absolutely asinine.

I believe there may be ways to get around this with layers of inner divs and weird `overflow: ` incantations, but that's exactly the kind of bullshit flex was supposed to solve.

See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items. If you need to enable a "safe" mode to prevent data loss, and that isn't supported on any mainstream browsers... you fucked up.

Correct. but grid is simpler to take in on the face. flex needs a bit of understanding.

CSS grid feel like someone asked TikTok to design a rectangle and said yes to every suggestion.

What does this meab?

I think they mean it’s a complicated solution for an uncomplicated problem.

Grid systems existed long before CSS grid and were dead-easy to understand and use (960, Bootstrap etc). CSS grid, by comparison, is completely unintuitive. Sure, it’s definitely more powerful, but the barrier to entry is way higher.

Exactly. "Align things to a grid" seems like a simple concept, but CSS grid seemingly has at least 3 ways to place the top-left corner of an element, and it just gets worse from there. I tried it for a simple layout with 3 elements and quickly decided I prefer flexbox, tables, or even floats.

I think when you come across situations that only grid can solve, then you appreciate it a bit more.

Flexbox complements grid imo, it's not an alternative.

That's fair. I only use CSS for personal/hobby projects.

Rachel Andrew has a very good 3-part tutorial that helped me actually understand what I am doing: https://www.smashingmagazine.com/2020/01/understanding-css-g...

It will take you from a n00b to a Grid pro in no time.

This is a really surprising take for me, grid is by far the most sane of the layout models in my experience.

Most, even 2D layouts map easily into nested 1D flexbox in my head. I feel like a single dimensional approach to layouts is way easier to wrap my head around and design with.