display: grid creates a block-level grid container, while display: inline-grid creates an inline-level grid container. Both use the CSS Grid layout model to arrange children in rows and columns.

Key Differences

1
display: grid behaves like a block element — it starts on a new line and stretches to fill the available width of its container.
2
display: inline-grid behaves like an inline element — it flows inline with surrounding text or inline elements and only takes up as much width as its content.
3
Both establish a grid formatting context for their child elements, supporting features like grid-template-columns, grid-template-rows, and gap.
4
Use inline-grid when you want the grid container to participate in inline flow, such as aligning grids with text or icons.
5
Use grid when you want the container to occupy its own block-level space for larger layout sections.

Example: Grid vs Inline-Grid

In this example, the block-level grid starts on its own line and spans the container width, while the inline-grid flows within text, behaving like an inline element but still arranging children as a grid.

Best Practices

1
Use grid for main layout sections where block-level spacing is desired.
2
Use inline-grid for small, inline grids that need to align with text or other inline content.
3
Combine both with other layout techniques like Flexbox for complex, responsive designs.

Difficulty: 3/10

Topics: display properties, layout containment, inline behavior

Scenario Questions

0-2 years experience

1
You're trying to align a small grid of icons next to a paragraph of text, but the grid is pushing everything below it — how would you fix that using display properties?
2
What happens if you set display: inline-grid on a div that’s currently display: block and it’s inside a paragraph? Describe the visual result.
3
You have a card component with a 2x2 grid of badges, and you want it to sit inline with a heading. Which display value would you use and why?

2-5 years experience

1
A designer says the product grid on the homepage should flow inline with surrounding text, but when we use display: grid, it breaks the layout — what’s likely happening and how would you fix it without changing the HTML structure?
2
We have a component that uses inline-grid for a badge list, but on mobile, the grid items wrap unpredictably. Is this a CSS issue or a design flaw? How would you investigate?
3
A teammate used inline-grid to make a toolbar responsive, but now it’s overlapping with adjacent elements on some screens. What could be the root cause and how would you debug it?

5-8 years experience

1
You're designing a reusable component library where some grids need to be inline (e.g., in headers) and others block (e.g., in main content). How would you architect the CSS to avoid style leakage and ensure predictable behavior across contexts?
2
In a high-traffic product page, we’re using inline-grid for dynamic tag clouds, but layout shifts are causing CLS penalties. Is inline-grid inherently problematic here? What alternatives or optimizations would you consider?
3
We’re migrating from flexbox-based inline layouts to grid for better alignment control. What edge cases in inline-grid (like baseline alignment, overflow, or parent containment) could break existing layouts during this transition?

8+ years experience

1
We’re standardizing our design system across 12 product teams, and some are using inline-grid for inline components while others use inline-flex or table-cell. How would you drive alignment on the right pattern, and what long-term maintenance risks do you foresee?
2
A legacy component uses inline-grid for a toolbar that’s now embedded in 50+ different contexts — some with RTL, some with dynamic font scaling. How would you evaluate whether inline-grid is the right foundation for this component long-term, and what metrics would you track?
3
We’re considering deprecating inline-grid entirely in favor of inline-flex for simplicity. What architectural tradeoffs would you present to leadership regarding accessibility, layout robustness, and future CSS features like subgrid?

Follow-up Questions

❓What happens if you put an inline-grid inside a flex container?
❓How would you debug a layout where an inline-grid seems to collapse unexpectedly?
❓Can you use inline-grid to create a responsive navigation bar without flexbox?