display: inline-grid 行の中のグリッドの親要素

グリッドの内側のルールはそのままに、親要素自身を行の流れに乗せたい場合に使います。文のそばに小さな2列の凡例を置く、ツールバーの一部だけを格子にする、といった用途です。

外側の描画です。親要素の幅は中身と列指定に従い、外側の親の幅いっぱいには自動では広がりません。grid との違いは、この外側だけです。

内側の描画です。grid-template-columns や gap、place-items の効き方は grid と同じです。ページ全体の段組みは grid、行の途中の小さな格子はこちら、と分けると追いやすいです。