css grid vs flex

Grid is Container-Based, Flexbox is Content-Based
This is an important difference. It shows that the flexbox layout is calculated after its content is loaded whereas the grid layout is calculated regardless of the content inside it. So, if possible, avoid using flexbox to build the overall layout of your website.

Grid Has a “Gap” Property, Flexbox Doesn’t

Flexbox is One Dimensional, Grid is Two Dimensional
Flexbox is best for arranging elements in either a single row, or a single column. Grid is best for arranging elements in multiple rows and columns.

Flexbox Wraps vs Grid Wraps
when a flex-item is wrapped and pushed in a new row, the Flexbox layout algorithm treats it as a part of a different flex-container. Hence the pushed item loses its context.

参考：https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/