Как оперативно "отключить" сетку CSS?

Question

На мобильных экранах я бы хотел, чтобы две кнопки были расположены в сетке из 3 столбцов, например:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}

.long-grid-item {
  grid-column: 1/3;
}

.short-grid-item {
  grid-column: 3/4;
}

button {
  width: 100%;
}

<div class="grid">
  <div class="long-grid-item">
    <button>Long</button>
  </div>
  <div class="short-grid-item">
    <button>Short</button>
  </div>
</div>

Однако на экранах настольных компьютеров я бы хотел «отключить» сетку, и кнопки имели фиксированную ширину: 200 пикселей для длинной кнопки и 100 пикселей. для краткого.

Можно ли сохранить эту HTML структуру и просто «отключить» функциональность сетки с помощью медиа-запросов?

Answer 1

Установите фиксированную ширину 100 пикселей для столбца для устройств шириной более 992 пикселей (или ширины вашего желания) с медиа-запросом. Надеюсь, я понял вашу проблему.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 30px;
}

.long-grid-item {
  grid-column: 1/3;
}

.short-grid-item {
  grid-column: 3/4;
}

button {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(3, 100px);
  }
}

<div class="grid">
  <div class="long-grid-item">
    <button>Long</button>
  </div>
  <div class="short-grid-item">
    <button>Short</button>
  </div>
</div>