Comparison
CSS gridvsFlexbox
CSS grid
you defined the columns once on the container and the children fell into place without any width of their own.
A two-dimensional layout model where the container defines rows and columns and items are placed into them. It is the right tool whenever alignment must hold across both axes, which flexbox cannot guarantee because each of its lines is sized independently. The trade is that the structure lives on the parent, so a component cannot fully control its own placement without the parent cooperating — which is exactly what `subgrid` addresses.
Full entry →Flexbox
you laid the row out along one axis and let the items decide how to share the leftover space.
A one-dimensional layout model: items are placed along a main axis, and the free space is distributed between them by `flex-grow`, `flex-shrink` and `flex-basis`. It is content-driven, which makes it the right choice when the items should size themselves and the wrong one when you need columns to line up across rows. The default `min-width: auto` on flex items is the source of the classic bug where a long word refuses to shrink or a child overflows its container.
Full entry →