Difference Between grid and inline-grid
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.
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.
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.