Мы увеличили ширину третьей колонки, и цена во второй карточке перестала выпадать. Но при этом блок с ценой (особенно в первой карточке) стал слишком большим. Так произошло, потому что по умолчанию грид-элементы занимают всё доступное пространство не только по высоте, но и по ширине.

Нам нужно, чтобы блоки с низкой ценой не тянулись на всю ширину области, а занимали столько места, сколько требуется их содержимому. Для этого элементу следует задать выравнивание по горизонтали.

За выравнивание отдельного элемента по горизонтали отвечает свойство justify-self:

.element {
  justify-self: start;
}

Это свойство принимает следующие значения:

• stretch — значение по умолчанию; элемент занимает всё пространство по ширине.
• start — элемент сжимается до содержимого и прижимается к левой границе.
• end — элемент сжимается до содержимого и прижимается к правой границе.
• center — элемент сжимается до содержимого и располагается по центру.

Потренируемся использовать свойство justify-self, а затем скажем блоку с ценой прижаться к правому краю.