The most important question to answer before writing any layout CSS is whether the structure you need is one-dimensional or two-dimensional. Flexbox is a one-dimensional layout system: its children flow along a single main axis (a row or a column), and any relationship between rows and columns must be assembled by hand. CSS Grid, by contrast, is a two-dimensional layout system where rows and columns are defined together and items can be placed precisely within that grid. A practical heuristic is to ask whether you are thinking "row or column" — reach for Flexbox — or "rows and columns with named positions" — reach for Grid.
Even with that rule, the two systems overlap. Centering a single child on the page is a trivial example: both \(display: grid; place-items: center;\) and \(display: flex; align-items: center; justify-content: center;\) produce the same result. The choice comes down to context. If the page itself is laid out with Grid and the centered child is just a small component, Flexbox is fine. If you are building the entire page skeleton — header, sidebar, main, footer — Grid's two-dimensional framing usually wins because rows and columns of the page are explicitly declared up front.
There is also a small class of layouts where neither module is the right tool. A lone child centered inside a box of known size can use \(margin: auto\), absolute positioning with a transform, or even a single line-height trick. Modern guidance generally favors reaching for Grid first when the layout is structural, then dropping into Flexbox for one-dimensional internals of individual components. The two systems coexist rather than compete, and the best layouts often mix them: Grid for the page, Flexbox for cards, navigation bars, and the like.