Looking for examples of things you can do with grid that you cannot do with flexbox.
Has anyone found any? Bonus points for nice, well-written articles.
Discussion
Loading...
the concave content-adjusted border radius at https://codepen.io/thebabydino/pen/mdNeKwE from @anatudor
@ppk anything that involves overlapping items by putting them in overlapping grid areas. This is made even more powerful with subgrid. Here’s a recent-ish application of subgrid I wrote about https://noahliebman.net/2025/08/using-subgrid-to-avoid-nested-interactive-elements/
@ppk A 2D zooming effect: https://css-tricks.com/zooming-images-in-a-grid-layout/ (not a common use case but not possible using flexbox)
Some grid pattern like I am explaining here: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/#grid-patterns (in the "grid patterns" section). Some of them can be done using flexbox but would require more complex code
@ppk equal height rows based on the tallest one using grid-auto-rows: 1fr;
https://codepen.io/t_afif/pen/pvbQBoQ/8862cf9366ab9a7daf19e2599f94b8cb
Same can be done for columns but it's more interesting for rows
@ppk Have items span tracks?
@Meyerweb It's nice and easy with grids, but you *could* do it with flexbox and a double-width item.
My point is that it's not all that easy to figure out unique capabilities of grid (as opposed to things that are just way easier with grid).
@ppk I was thinking across rows more than columns (or both). Also, subgrid.