Stuck choosing between css grid vs flexbox? Use Flexbox when you lay items out along one line, a row or a column, and Grid when you need rows and columns together. You can also combine them.
This guide belongs to the web design basics section and focuses on one layout decision.
| Item | Value |
|---|---|
| Flexbox | One-dimensional: a row or a column |
| Grid | Two-dimensional: rows and columns |
| Switch on Grid | display: grid or display: inline-grid |
| Result of display: grid on its own | A single column grid |
| Flexible track unit | fr, a fraction of the available space |
| Example fixed columns | Three 200-pixel-wide column tracks |
These figures come from the MDN guide to basic concepts of grid layout and the Envato Tuts+ comparison dated Aug 28, 2024. Guides and specifications change over time, so check the source before you rely on them.
What is the core difference between Grid and Flexbox?
The short answer is dimensions. The Envato Tuts+ guide states that Flexbox is one-dimensional, while CSS Grid is two-dimensional. The Academind article from January 31, 2023 reaches the same verdict: the key differentiation is the amount of dimensions you need to work with.
Flexbox lays items out along either the horizontal or the vertical axis, so you decide up front between a row-based or a column-based layout. Grid works along both axes. You define rows and columns, then place items into the cells they create.
Real projects blur this line, and the Envato guide says so openly. You can build two-dimensional layouts with Flexbox thanks to its wrapping, and one-dimensional layouts with Grid thanks to its auto-placement. The same guide adds that practice frequently overrides theory, so treat the dimension rule as a starting point, not a law.
How Flexbox lays out items
Flexbox is switched on through the display property, just like Grid. In Academind’s example, a navigation list becomes a flex container, and the line flex-direction: row tells the browser to position the child elements in a row. Two more properties, justify-content and align-items, control how those children sit next to each other.
A flex layout can also wrap into multiple rows or columns. According to the Envato Tuts+ guide, Flexbox treats each row or column as a separate entity, based on its content and the available space. That content-driven behaviour is what makes it comfortable for small groups of items.
Flexbox was not originally meant for building grids, yet it is frequently used that way. The same guide names the Bootstrap 4 grid system as the best example, because it is based on Flexbox.
Typical Flexbox jobs from the sources include:
- A navigation list where links sit in a single row.
- A list of users, which Academind calls a good fit for Flexbox.
- Positioning elements inside a single grid cell when you only need one dimension, a row or a column.
How Grid lays out items
You create a grid container by declaring display: grid or display: inline-grid, and the MDN basics guide explains that all direct children of that element then become grid items. At first nothing looks different, because the browser has created a single column grid. The MDN Learn page makes the same point: unlike flexbox, the items will not immediately look any different.
To see a real grid you add column tracks. MDN’s first example creates a grid with three 200-pixel-wide column tracks, and any length unit or percentage works. Grid also adds the fr unit, which represents a fraction of the available space in the grid container.
You can mix fr units with fixed-length units, and the MDN Learn page notes that the fr unit distributes available space, not all space. A track with large content therefore leaves less free space for the others.
MDN lists several features that Flexbox does not describe in the same way:
- Item placement by line numbers, names, or by targeting an area of the grid.
- An algorithm that places items you did not position explicitly.
- Extra rows and columns added when needed.
- Alignment control for items and for the whole grid.
- Overlapping content, where more than one item can sit in a cell or area.
For spacing, the gap properties do the work: column-gap for gaps between columns, row-gap for gaps between rows, and gap as a shorthand for both.
A full page layout in Grid
Academind shows the classic case: a page with a header, a sidebar, a main area and a footer. The body becomes a grid with a 30% sidebar column and 60px rows for header and footer, and each element is assigned to a named area with grid-area. That is the kind of layout where two dimensions pay off, because the header and footer span both columns.
Before you write any CSS, a website wireframe can show you whether your design really needs rows and columns working together.
When to choose Grid and when to choose Flexbox
Use these steps as a quick decision path:
- Sketch the layout and count the directions items need to line up in.
- If items must align in rows and columns at once, such as a spreadsheet-like table or a full page, start with Grid.
- If items just follow one line, such as a navigation list or a list of users, start with Flexbox.
- If a single page has both needs, use both and keep each one to the job it does best.
Academind frames it with two questions. Are you building a spreadsheet? Then you are working with rows and columns, and CSS Grid probably should be your choice.
The decision is about the layout you need, not about which tool is newer. MDN describes Grid, when combined with other parts of CSS such as flexbox, as a way to create layouts that are responsive, flexible, and accessible. Still, check the finished result against the web accessibility guidelines, because a clean layout is only one part of an accessible page.
Using Grid and Flexbox together
The two modules are partners, not rivals. Academind’s advice is to create the overall layout with Grid and use Flexbox to position elements inside a cell, for every case where you only need to position them in one dimension. The Flexbox navigation in its header and footer is exactly that.
The reverse also works: it is possible to nest the CSS Grid inside a Flexbox item. You could have a row of elements where one or all of them hold a more complex layout.
A practical recipe looks like this:
- Define the page areas with Grid.
- Place single-line groups, such as menus and button rows, with Flexbox inside those areas.
- Reach for a nested Grid only when a component itself needs rows and columns.
Academind sums it up: mix and match both technologies as required and you can build really flexible and powerful user interfaces.
Frequently asked questions
Is Grid better than Flexbox?
Show answer
Neither is better in general. Grid suits layouts with rows and columns, Flexbox suits a single row or column, and Academind recommends mixing both as required.
Can Flexbox build a two-dimensional layout?
Show answer
Yes, because a flex layout can wrap into multiple rows or columns. The Envato Tuts+ guide cites the Bootstrap 4 grid system, built on Flexbox, as the best example.
What does display: grid do by itself?
Show answer
It makes the direct children grid items in a single column, so they still appear one below the other. You add tracks with grid-template-columns to get a visible grid, as the MDN Learn page shows.
What is the fr unit?
Show answer
It is a Grid length unit that represents a fraction of the available space in the grid container. You can combine it with fixed lengths such as pixels in the same track list.
Can I nest one inside the other?
Show answer
Yes. You can place Flexbox containers inside grid cells, and you can nest a Grid inside a Flexbox item, as Academind describes.
