Как скрывать столбец css grid если он не помещается на экран?

Если вы используете CSS Grid и хотите скрыть столбец, если он не помещается на экран, вы можете воспользоваться свойством grid-template-columns и специальным значением minmax() для настройки ширины столбца.

Вот как это можно сделать:

1. Прежде всего, установите вашей родительскому контейнеру CSS Grid. Например, вы можете задать следующее свойство для вашего контейнера:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

2. Здесь мы использовали функцию repeat() и ключевое слово auto-fit, чтобы автоматически повторить столбцы, как только они помещаются на экран, и minmax() для определения минимальной и максимальной ширины столбца. В данном случае, если столбец будет меньше 200 пикселей, он будет скрыт.

3. Теперь, когда вы установили это свойство, ваши столбцы будут автоматически скрываться, если они не помещаются на экран.

<div class="container">
  <div class="column">Столбец 1</div>
  <div class="column">Столбец 2</div>
  <div class="column">Столбец 3</div>
  <div class="column">Столбец 4</div>
</div>

4. В примере выше у нас есть 4 столбца. Если ширина экрана достаточно большая, все столбцы будут отображаться на одной строке. Однако, если ширина экрана станет меньше, и не все столбцы помещаются на одной строке - неактивные столбцы будут автоматически скрыты.

Таким образом, задавая свойство grid-template-columns с помощью конструкции minmax() и auto-fit, вы сможете автоматически скрывать столбцы CSS Grid, которые не помещаются на экране.