What’s the difference between display: inline-grid and display: grid?

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.

Both establish a grid formatting context for their child elements, supporting features like grid-template-columns, grid-template-rows, and gap.

Use inline-grid when you want the grid container to participate in inline flow, such as aligning grids with text or icons.

Use grid when you want the container to occupy its own block-level space for larger layout sections.