CSS Flexbox vs Grid Table
| Dimension | Flexbox | Grid |
|---|---|---|
Axes | One dimension - row OR column | Two dimensions - rows and columns together |
Sizing model | Content-first: items size the line | Layout-first: the grid defines the cells |
Wrapping | flex-wrap optional | Native - the template is the wrap |
Order changes | order property per item | Grid placement places anywhere |
Alignment | align/justify on axes | Same properties, both axes plus gap |
Overlap | No - items push each other | Natural - same grid cell, layered |
Best for | Toolbars, nav, card rows, content flow | Page shells, dashboards, galleries, forms |
They compose | Grid track contains a flex row | Flex item contains a nested grid |
Flexbox and Grid are the two layout systems of modern CSS, and the internet's oldest layout argument misses the point: they are not competitors. The table below compares them across eight honest dimensions - then gives the decision rule that ends the debate in one sentence.
Bottom line: flexbox adapts the layout to the content (a toolbar flexes around whatever label widths arrive); grid adapts the content to a designed layout (a page shell with header, sidebar and main area exists whether the content knows it or not). Content-first chooses flexbox; layout-first chooses grid. Real pages nest them - grid draws the regions, flexbox arranges the content inside each region.
The honest part: two capabilities are exclusive. Only grid can place items anywhere in two dimensions - overlapping cells, explicit row-and-column addresses. Only flexbox has content-driven magic like justify-content: space-between and margins that auto-absorb free space. When a design needs both, that is the signal to nest, not to fight one system into doing the other's job.
How to use
- Ask the direction question: does this layout flow in one dimension (flexbox) or live in two (grid)?
- Apply the decision rule: content-defined sizing wants flexbox; designed regions want grid - then nest them for real pages.
- Use the dimensions table for the details: wrapping, order changes, overlap and the alignment properties each system shares.
Frequently asked questions
When should I use flexbox instead of grid?
When the layout should adapt to the content: a navigation bar with unknown label widths, a row of cards whose count varies, a button group that must stay together. Flexbox distributes free space along one axis and wraps when needed - content drives the result. The reverse test: if the design has fixed regions (a sidebar column that exists regardless of content length), that is grid - the layout is the requirement, not the content.
Can flexbox and grid be used together?
Not just together - nested is the standard architecture of modern pages. The page shell is a grid (header, sidebar, main, footer regions), and inside the main region a card row is flexbox, and inside each card a label-value pair is another small grid. Each system does what it is best at within its own container. The mistake to avoid is making one container do both jobs - a grid pretending to flex produces the unmaintainable middle ground.
Why do items overlap in grid but push each other in flexbox?
Because grid items have explicit addresses: two items assigned the same grid cell overlap by design - which is how layered heroes and caption-over-image layouts work without position:absolute. Flexbox items have no addresses; they participate in space distribution and push each other along the axis. If you are fighting flexbox to stack things, the layout you want is a grid cell with two occupants.
Is grid harder to learn than flexbox?
Grid has more vocabulary (template areas, explicit tracks, placement lines), but the extra vocabulary is what makes it MORE predictable: the container declares the layout and items land in it. Flexbox is smaller but its space-distribution rules (flex-grow ratios, basis, min-size interplay) produce the famous 'why is this item shrinking' debugging sessions. Learn flexbox for one-axis problems, add grid for two-axis problems, and the combination covers every layout you will ship.