Flexbox distributes items along an axis
A flex container can align items, distribute remaining space, and wrap when needed. It is useful for navigation bars, action groups, and small component layouts where content size should influence the result.
Grid defines tracks
Grid creates columns and rows that multiple items can share. Fractional tracks, minimum sizes, and auto-fit patterns make it useful for page regions and galleries without manually positioning each item.
A familiar example
Choosing a layout system
- Use Flexbox for a button row whose labels have different widths.
- Use Grid for a gallery where cards should share columns.
- At a narrow width, let the row wrap or reduce the grid's column count.
What to remember
- Flexbox is usually one-dimensional; Grid is two-dimensional.
- Content size is part of layout, not an inconvenience.
- Avoid fixed coordinates when tracks and alignment can express the relationship.