Flexbox vs grid comes down to dimensions: flexbox lays items out along one axis, a row or a column, while grid controls rows and columns together. Most real pages use both, each where it fits best.
Both belong to the layout toolkit covered in the wider guide to front-end web development, and knowing which to reach for saves a lot of fiddly overrides later.
The core difference: one dimension or two
MDN Web Docs puts the distinction plainly: flexbox was designed for layout in one dimension – either a row or a column. Grid was designed for two-dimensional layout – rows, and columns at the same time. Everything else about the two systems follows from that.
The same page offers a practical test. It suggests asking whether the layout needs control by row or column only, or by row and column at once: Do we only need to control the layout by row or column? If yes, use flexbox. Do we need to control the layout by row and column? If yes, use grid layout. A navigation bar, a button group or a row of tags is a single line of items, so flexbox fits. A page template with a header, sidebar, content area and footer needs both directions, so grid fits.
How flexbox works
A flex container arranges its children along a main axis. As MDN explains, the main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Properties such as justify-content distribute free space along the main axis, while align-items positions items on the cross axis. Changing the direction from row to column swaps which axis each property controls, which is the usual source of confusion for newcomers.
By default all items stay on one line. MDN notes that the flex-wrap property’s default value is nowrap, so items overflow the container when they run out of room. Setting wrap lets items move onto a new line, but each line then manages its own spacing independently, and items on different lines do not line up in columns. That behaviour is the clearest sign that flexbox is a one-dimensional tool.
Flexbox also sizes items from their content. The Flex properties let items grow to absorb spare space or shrink to avoid overflow, so the amount of text or the size of an image influences the result. This is why flexbox excels at components whose contents vary.
How grid works
Grid starts from the container. MDN describes how CSS grid layout introduces a two-dimensional grid system to CSS, and notes that grids can be used both for major page areas and for small interface elements. Rows and columns are defined once, and items are placed into the resulting cells.
Track sizes can use any length unit, plus one built for the job. According to MDN, the fr unit represents a fraction of the available space in the grid container, which makes flexible columns straightforward. The minmax function gives a track a floor and a ceiling so that it can grow with its content, and the gap properties handle spacing: gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap.
Placement is explicit when needed. Items can sit in an exact spot, because you can place items into a precise location on the grid using line numbers, names or by targeting an area of the grid. That explicit control over both rows and columns is what flexbox does not offer.
Content out or layout in
MDN offers a second way to decide, beyond the number of dimensions: flexbox works from the content out. A good flexbox case is a set of items spaced evenly in a container, where you let the size of the content decide how much individual space each item takes up.
Grid reverses the order. MDN says that when using grid, you create a layout and then you place items into it. The structure exists before the content arrives, which keeps columns aligned across rows even when one cell holds much more text than its neighbours.
A useful rule of thumb follows. If the design is defined by its items, such as a toolbar whose buttons set its width, start with flexbox. If the design is defined by a structure, such as a product listing with aligned columns, start with grid.
Side-by-side comparison
| Question | Flexbox | Grid |
|---|---|---|
| Dimensions | One at a time, row or column | Rows and columns together |
| Sizing starts from | The content | The layout |
| Wrapped items | Each line spaced independently | Items stay on shared tracks |
| Good fit | Navigation bars, button groups, centred content, card footers | Page templates, galleries, dashboards, forms with aligned columns |
The comparison summarises guidance in the MDN guide to the relationship of grid layout with other layout methods.
Using flexbox and grid together
The two systems are not rivals. A page template can be a grid whose areas hold flexbox components: the grid positions the header, the main column and the sidebar, and inside the header a flex container spaces the logo and the navigation links. Nesting works in either direction, and it is often the cleanest solution.
Grid has also grown a feature that helps nested layouts line up. MDN lists subgrid as Baseline, noting that it is well established and works across many devices and browser versions. A subgrid lets the children of a nested grid take their track sizes from the parent grid, so card contents in different cards can align with each other.
Layout choices interact with responsive design. MDN’s responsive design lesson covers the relationship between modern layout tools such as grid and flexbox, and responsive design. A common pattern is to define a grid or flex layout for narrow screens and adjust it for wider ones; the guide to css media queries shows how those adjustments are triggered.
Choosing for common interface patterns
A few typical cases show how the decision plays out.
- Navigation bar: flexbox. Items sit in one row and space themselves according to their content.
- Card grid: grid. Cards need to line up in columns and rows, and track definitions make that predictable.
- Form with labels and fields: grid when labels and inputs must align in two columns, flexbox for a single row such as a search box with a button. The html input types guide covers which controls such a form can use.
- Centring one element: either works, and the choice usually depends on what else the container holds.
- Full page template: grid for the overall frame, flexbox inside individual regions.
When two options seem equally good, choose the one that makes the code easier to read. A grid definition that names the columns once is often clearer than a chain of flex items with widths set on each. Equally, a short flex container that centres a button needs far less code than a grid. The tool that matches the shape of the problem usually produces the smallest and most maintainable stylesheet, and it is the one a colleague will understand first.
Frequently asked questions
Can flexbox and grid be used in the same layout?
Yes. A grid item can itself be a flex container, and a flex item can be a grid container. Many layouts use grid for the page frame and flexbox for components within it.
Is flexbox a replacement for grid?
No. MDN describes flexbox as designed for one dimension and grid for two, so each solves a different problem.
Which one is better for responsive layouts?
Both support responsive design. Flexbox adapts well when items can wrap and resize, and grid is strong when columns must stay aligned as the layout changes. MDN’s responsive design lesson covers how they relate to responsive techniques.
What does the fr unit do in a grid?
It divides the available space in the grid container into fractions, so three columns of equal fractions share the width evenly and resize with the container.
