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

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

Сейчас мы умеем задавать размеры столбцов с помощью фиксированных значений, например, вот так:

grid-template-columns: 100px 100px 100px;

Но если мы хотим оставить среднему столбцу автоматический размер, то в объявлении должно появиться ключевое слово auto. То есть код станет таким:

grid-template-columns: 100px auto 100px;

Опробуем такой подход.