CSS сетка макет фид размер ячейки содержимого

Question

Я новичок в сетках CSS и сделал динамический макет сетки для простого выбора данных с помощью пользовательского ввода.Макет работает, как и ожидалось, но у меня проблема с достижением отзывчивости для смартфонов.

Я получил следующее:

(текущий вид планшета)

(текущий вид смартфона)

Мой желаемый результат состоит в том, чтобы изменить расположение столбцов сетки для смартфонов только таким образом:

(представление смартфона)требуемый)

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

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

На это:

.container--controls-buttons {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

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

Вы можете проверить мой полный код на следующем коде: https://codepen.io/manuelhrast/pen/RwbOwpX?editors=1100

Заранее благодарен за любую помощь!:)

Answer 1

Обновить этот медиа-запрос поможет.в основном весь смартфон покроет.

@media screen and (max-width: 600px) {
  .container--controls-buttons {
    grid-template-columns: auto;
  }
}