In short
Use Grid when you are placing elements in two dimensions — rows and columns together — or when the layout should be defined by the container. Use Flexbox when you are distributing items along one axis and want their own sizes to influence the result. They are not competitors: most real interfaces use Grid for page structure and Flexbox for components inside it.
The rule
Grid is two-dimensional and container-driven. Flexbox is one-dimensional and content-driven.
With Grid, you define the structure and place things into it. With Flexbox, you set the rules for distribution and the items' own sizes shape the outcome.
That difference tells you which to use nearly every time.
When Grid is the right answer
Page-level layout. Header, sidebar, main, footer. Two dimensions at once, and you want control of both.
Card grids where alignment matters across rows. With Grid, the same part of every card lines up across the whole set, because tracks are shared. Flexbox rows do not know about each other.
Any layout you can describe as a diagram. If you would sketch it as boxes on a grid, use Grid — grid-template-areas lets you write that sketch almost literally, which is one of the most readable things in CSS.
Overlapping elements. Placing two items in the same cell is straightforward, and much cleaner than absolute positioning.
Responsive without media queries. repeat(auto-fit, minmax(240px, 1fr)) produces a grid that reflows by itself. This single line replaces a stack of breakpoints.
When Flexbox is the right answer
Anything in a row or a column. Navigation items, button groups, a label beside an input, a toolbar.
When content should decide the sizing. Items sized to their content, with the remaining space distributed by rule, is exactly what Flexbox does well.
Pushing things apart. margin-left: auto on one item, or justify-content: space-between, is the cleanest way to push a control to the far end of a bar.
Vertical centring within a component. Still the most direct approach for one item in a container.
Wrapping where rows are independent. Tags, chips, filters — where you want items to flow and do not need alignment between rows.
They work together
The framing as a choice is misleading. Real interfaces use both, at different levels.
Grid defines the page. A card sits in a grid cell, and inside that card Flexbox arranges the image, the text, and the button. The card's footer uses Flexbox to push a link right. The whole set of cards uses Grid so their headings align.
A useful habit: Grid for structure, Flexbox for components. It resolves most decisions without thinking about it.
Use gap, not margins
Both support gap, and it is better than margins for spacing between siblings.
Margins between children collapse in confusing ways, need :last-child exceptions, and break when items reorder or wrap. gap applies only between items, needs no exceptions, and survives reordering.
The habit of spacing with margins is worth unlearning; it is behind a surprising share of fragile layouts.
Mistakes that make layouts fragile
Fixed pixel heights. Content grows — translations are longer, users increase text size. Let height come from content.
Forgetting min-width: 0 on flex items. Flex items default to min-width: auto, which prevents shrinking below content size. This is the cause of nearly every mysterious horizontal overflow involving long unbroken strings.
Nesting too deep. Several nested flex containers to achieve something Grid does in one declaration. If you are three levels deep positioning one element, reconsider.
Absolute positioning for layout. It removes elements from flow, so nothing responds to anything. Use Grid placement instead.
Ignoring intrinsic sizing keywords. min-content, max-content and fit-content solve sizing problems that otherwise get hard-coded.
Container queries change the calculus
With container queries, a component can respond to the width of its own container rather than the viewport. That matters here because it removes the main reason components were built assuming a fixed page position.
A card can now use one layout when narrow and another when wide, wherever it appears — sidebar, main column, modal. Combined with Grid for the page and Flexbox inside the component, that is most of what modern layout needs.
The short version
If you are placing things in rows and columns, use Grid. If you are distributing things along one axis, use Flexbox. If you are describing a page, use Grid. If you are arranging the inside of a component, use Flexbox.
And use gap for spacing in both. That decision alone removes a category of layout bugs.
If you have a layout that keeps breaking on real content, book a call.
Common questions
Should I use CSS Grid or Flexbox?
Grid when you are placing elements in two dimensions — rows and columns together — or when the container should define the layout. Flexbox when you are distributing items along a single axis and want their own content sizes to influence the result. Most interfaces use Grid for page structure and Flexbox inside components.
Can you use Grid and Flexbox together?
Yes, and most real layouts do. Grid defines the page, a card sits in a grid cell, and Flexbox arranges the contents of that card. A useful default habit is Grid for structure and Flexbox for components, which resolves most decisions without deliberation.
Why does my flex layout overflow horizontally?
Almost always because flex items default to min-width: auto, which prevents them shrinking below their content size. A long unbroken string then forces the container wider than the viewport. Setting min-width: 0 on the flex item fixes it.
Should I use gap or margins for spacing?
Gap, in both Grid and Flexbox. Margins between siblings collapse in confusing ways, require last-child exceptions, and break when items reorder or wrap. Gap applies only between items, needs no exceptions, and survives reordering — it removes a whole category of fragile layout.
How do I build a responsive grid without media queries?
Use repeat with auto-fit and minmax — for example repeat(auto-fit, minmax(240px, 1fr)) — which fits as many columns as will hold the minimum width and reflows automatically. That single declaration replaces a stack of breakpoints for most card layouts.
