12 / 49

What is the difference between display: grid and display: flex?

Difference Between display: grid and display: flex in CSS

display: flex and display: grid are both CSS layout models, but they serve different purposes. Flexbox is designed for one-dimensional layouts (row or column), while Grid is designed for two-dimensional layouts (rows and columns simultaneously).

Key Differences

1
flex arranges child elements along a single axis (horizontal or vertical), while grid allows layout along both rows and columns.
2
flex is ideal for distributing space and aligning items in a single row or column, whereas grid provides precise control over both dimensions of the layout.
3
Flex items can wrap to multiple lines with flex-wrap, but Grid defines explicit row and column structures.
4
Grid supports features like named areas, spanning multiple rows/columns, and gap controls (row-gap, column-gap) that Flexbox doesn’t provide natively.
5
Both models support alignment, but Grid allows aligning items along two axes independently, whereas Flexbox primarily aligns along the main and cross axis.

Example: Flex vs Grid

In this example, the Flex container arranges items in a single row with spacing between them. The Grid container arranges items in a two-column layout with precise control over columns and gaps.

Best Practices

1
Use Flexbox for simple one-dimensional layouts, like nav bars or horizontal lists.
2
Use Grid for complex two-dimensional layouts where both rows and columns need precise control.
3
Combine Flex and Grid strategically for responsive, modern layouts.

Difficulty: 5/10

Topics: layout, responsive design, CSS Grid vs Flexbox

Scenario Questions

0-2 years experience

1
You need to create a simple navigation bar with items spaced evenly across the width. Would you use Flexbox or Grid, and how would you write the CSS?
2
If you set a container to display: grid but only define one column, what layout behavior do you observe compared to display: flex?

2-5 years experience

1
While building a product listing page, the layout breaks on mobile after adding a new filter sidebar. How would you debug whether Flexbox or Grid is causing the issue?
2
You have a card component that needs a header, image, body, and footer arranged in a column, but the body should stretch to fill remaining space. Which layout system would you pick and why?

5-8 years experience

1
Our design system currently uses Flexbox for most components, but a new dashboard requires a complex matrix layout with overlapping items. How would you approach refactoring the relevant components, and what trade‑offs would you consider?
2
Explain how you would ensure consistent alignment and spacing when mixing Grid containers inside Flexbox parents across a large application.

8+ years experience

1
We plan to migrate a legacy codebase that heavily relies on Flexbox to a Grid‑first approach for better maintainability. What strategy would you propose for a phased rollout, and how would you mitigate regression risk?
2
At an organization‑wide level, how would you set guidelines for when teams should prefer Grid over Flexbox, considering performance, developer experience, and future scalability?

Follow-up Questions

❓How would you decide which layout method to use for a card component that needs both horizontal and vertical alignment?
❓Can you describe a situation where mixing Grid and Flexbox in the same component makes sense?
❓What are the browser support considerations when adopting Grid in an existing codebase?