Flexbox stretch vs CSS Grid auto rows for equal-height responsive card columns
0 reputation · 11 Oct 2021, 08:15 UTC
A design requires responsive card columns where each row maintains equal-height cards while allowing fluid column counts across breakpoints. The container must support cards with variable content length and nested grid children inside each card.
Flexbox offers one-dimensional control with align-items: stretch for equal heights, but multi-row grids typically need wrappers and wrapping can become unpredictable when item sizes vary. Grid provides two-dimensional placement with explicit tracks, so equal heights emerge from grid-template-rows, and fluid columns can be expressed with repeat(auto-fit, minmax(...)). Grid also adds verbosity for fallbacks.
The constraint is consistent overflow handling when intrinsic sizing interacts with a flex item that contains a grid child. The interaction of min-content/max-content with flex-basis in this nested case is an unresolved behavior.
Which approach gives more predictable equal-height results for cards that contain nested grids with intrinsic content? How does flex-basis resolution differ from grid track sizing when min-content is involved? Is the overflow variance across browsers a spec ambiguity or an implementation difference?