Two-column sidebars are the canonical comparison. In Grid, \(grid-template-columns: 250px 1fr;\) defines an explicit sidebar plus flexible main region. In Flex, the sidebar gets \(flex: 0 0 250px\) and the main area gets \(flex: 1\). Both produce identical visual results, but the Grid version declares the structure once while the Flex version encodes proportions on each child. For the "Holy Grail" layout — header, navigation, main, aside, footer — Grid's \(grid-template-areas\) shines. A compact declaration such as \(grid-template: 'header header header' auto 'nav main aside' 1fr 'footer footer footer' auto / 200px 1fr 200px;\) names every region, after which children are placed with \(grid-area: header\) and so on.
Sticky footers are equally idiomatic in both systems. With Flexbox: make the body a column flex container with \(min-height: 100vh\), give the content area \(flex: 1\), and the footer hugs the bottom. With Grid: \(grid-template-rows: 1fr auto\) on the body achieves the same. Cards with a body that grows to fill and a footer that sticks to the end rely on the same \(display: flex; flex-direction: column\) pattern with \(flex: 1\) on the body. Forms are particularly well-suited to Grid because label/input pairs are inherently two-dimensional: \(grid-template-columns: max-content 1fr\) aligns labels to their content and inputs to remaining space, with a single \(gap\) replacing per-row margin tricks.
Other recurring patterns include navbars (Flexbox along a single row, often with \(justify-content: space-between\) or the \(margin-left: auto\) trick), chat layouts (a flex column with a scrolling \(flex: 1\) body and an input pinned to the bottom via \(align-self: flex-end\)), image galleries (Grid with \(grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))\) plus \(aspect-ratio: 1;\)), kanban boards (a flex row of columns, each itself a flex column of cards), and pricing tables (Grid with a header row that spans and feature rows aligned across columns). Mixing the two is a feature, not a workaround: Grid for the page skeleton and Flex for component internals is a common and recommended division of labor. \(display: contents\) can remove a wrapper's box so its children participate directly in a parent's flex/grid context, though it has historically caused screen-reader gaps that are now being addressed.