Как сделать адаптивную grid сетку?

Для создания адаптивной grid сетки в CSS, можно использовать свойство display: grid в сочетании с медиа-запросами и другими CSS свойствами.

Первым шагом является создание контейнера сетки, в котором будут размещаться элементы. Для этого зададим стили для контейнера следующим образом:

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

Здесь мы используем свойство display: grid, чтобы определить контейнер как сетку. Затем, с помощью grid-template-columns, мы создаем автоматическое количество колонок (auto-fit), так чтобы каждая колонка имела минимальную ширину 250 пикселей и расширялась на всю доступную ширину (1fr). grid-gap задает промежуток между элементами в сетке.

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

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

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

В данном примере мы использовали три медиа-запроса. Первый срабатывает при ширине экрана меньше или равной 600 пикселей, и в этом случае мы задаем одну колонку (grid-template-columns: 1fr). Второй медиа-запрос активируется при ширине экрана от 601 до 900 пикселей и задает две колонки (grid-template-columns: repeat(2, 1fr)). Третий медиа-запрос срабатывает при ширине экрана от 901 до 1200 пикселей и задает три колонки (grid-template-columns: repeat(3, 1fr)).

Таким образом, в зависимости от ширины экрана, сетка будет адаптироваться и отображать разное количество колонок.

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

Надеюсь, данный ответ помог вам понять, как создать адаптивную grid сетку в CSS.