Основное отличие использования inline-grid от обычного display: grid заключается в том, как элементы взаимодействуют с окружающими элементами. 1

display: grid определяет элемент как grid-контейнер уровня блока, при этом элемент растягивается на всю ширину и имеет своё полное пространство среди окружающих блоков. 12 Происходит перенос строк в начале и в конце блока. 1

inline-grid используется для элементов встроенного уровня, например тегов или . 3 Элемент обтекается другими элементами, при этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный. 1

Таким образом, display: grid подходит для создания больших макетов, охватывающих несколько столбцов и строк, а inline-grid — для создания более компактных макетов, которые содержатся в одной строке текста. 3