Both arrived as “the new layout system” and they are not alternatives. Flexbox distributes space along one axis; grid places items on two at once.
/* one dimension: a row of things sharing the space */
.toolbar { display: flex; align-items: center; }
.toolbar__spacer { flex: 1; }
/* two dimensions: a page skeleton */
.page {
display: grid;
grid-template-columns: 16rem 1fr;
grid-template-rows: auto 1fr auto;
}The rule of thumb that holds up: if the arrangement is decided by the content, use flex; if it is decided by the container, use grid. A navigation bar sizes itself around its items — flex. A page layout exists before the content does — grid. They nest freely, and most real pages use both.