display: grid and display: inline-grid both create a grid container for arranging child elements in rows and columns. The key difference is how the container itself behaves in the layout.

Key Differences

1
display: grid: The container behaves as a block-level element. It stretches to fill the width of its parent by default and starts on a new line.
2
display: inline-grid: The container behaves like an inline-level element. It only takes up as much width as its content and can sit inline with other elements.

Example: grid vs inline-grid

Difficulty: 4/10

Topics: CSS layout, grid vs inline-grid, display property

Scenario Questions

0-2 years experience

1
You need a two‑column layout inside a paragraph of text. Would you use display:grid or display:inline-grid for the container, and why?
2
If you set an element to display:inline-grid and give it a fixed width, how will it behave compared to the same element with display:grid?

2-5 years experience

1
Your team switched a component from display:grid to display:inline-grid and the surrounding content now wraps oddly. What could be causing that, and how would you fix it?
2
While debugging a responsive page, you notice that a grid container collapses to zero height on mobile only when it’s set to inline‑grid. Explain why this happens and how to resolve it.

5-8 years experience

1
You are designing a reusable UI library that includes a card component which may appear as a block element on a dashboard or inline within a paragraph of an article. How would you decide whether to expose display:grid or display:inline-grid as the default, and what trade‑offs would you consider?
2
A large application uses many grid containers that are currently block‑level, but the design team wants them to flow inline with surrounding text without rewriting every component. What migration strategy would you propose, and what performance or specificity concerns would you watch for?

8+ years experience

1
Your organization is planning a cross‑team refactor to replace legacy float‑based layouts with CSS Grid. Part of the plan is to decide when to use inline‑grid versus grid at a system level. How would you create guidelines that balance layout consistency, accessibility, and rendering performance across dozens of teams?
2
When introducing a new design system, you need to ensure that components using inline‑grid work correctly in email clients that have limited CSS support. What architectural decisions and fallback strategies would you employ to maintain a consistent experience?

Follow-up Questions

❓How does the default width of an inline‑grid differ from a block‑grid?
❓What happens to grid items when the container is inline‑grid and the line breaks?
❓Can you combine inline‑grid with other inline‑level elements without affecting vertical alignment?