There's plenty of overlap, but they solve different problems: flexbox when the content should control element sizing/fit, grid when the container should control element sizing/fit.

▲

alwillis 3 hours ago | parent | next [-]

Another way to think about it: flexbox is for alignment of boxes in one dimension: horizontally or vertically.

CSS Grid is for two dimensional layout of rows and columns.

Back in the day, developers wanted page layout instead of the hacks on top of hacks with table-based layouts, floats and positioning to create layouts.

We’ve had CSS Grid designed for page layout on the web, in all browsers since 2017; as of 2022, only 12% of the top 1 million websites used CSS Grid, which to me is ridiculously low.

	▲	rckt 14 minutes ago \| parent [-]
		I use flexbox for grid purposes, simply because the syntax is straightforward and easy to read. Yeah, it’s one dimension, but if you nest it, it becomes two with no issues.

▲

ffsm8 2 hours ago | parent | prev [-]

But flex grow and align stretch exist, which moves control back to the parent...

A grid really feels like a list flexes to me too, functionally.