Как сделать аналог shrink для грида?

Чтобы создать аналог shrink для CSS Grid, вам необходимо использовать свойство grid-template-columns и значение minmax.

Свойство grid-template-columns определяет ширину столбцов внутри сетки. Вы можете указать размеры столбцов явно, используя значения в пикселях или процентах, или вы можете использовать функцию minmax для создания гибкой ширины столбцов.

Функция minmax позволяет задать минимальное и максимальное значение ширины столбца. Если контент внутри столбца меньше его минимального значения, столбец будет уменьшаться до минимального значения. Если контент превышает максимальное значение ширины, столбец будет увеличиваться до максимального значения.

Пример использования minmax в свойстве grid-template-columns выглядит следующим образом:

.grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(200px, 2fr) minmax(100px, 1fr);
}

В этом примере первый столбец будет иметь минимальную ширину 150 пикселей и максимальную ширину 1 fr (единица меры гибкой доли). Второй столбец будет иметь минимальную ширину 200 пикселей и максимальную ширину 2 fr. Третий столбец будет иметь минимальную ширину 100 пикселей и максимальную ширину 1 fr.

Вы также можете использовать другие единицы измерения, такие как em или rem, вместо пикселей, в зависимости от ваших потребностей.

В результате можно достичь аналога свойства flex-shrink для Grid, где столбцы будут уменьшаться или увеличиваться в зависимости от размера содержимого и заданных минимальных и максимальных значений.