Как конвертировать CSS-столбцы шаблона сетки в отзывчивые строки

Question

Я пытаюсь отобразить макет с 3 столбцами на рабочем столе и макет с одним столбцом на мобильном телефоне с помощью CSS Grid.

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

.page {
  display: grid;
  grid-template-columns: 33% 34% 33%
}

@media (max-width: 650px) {
  .page {
    grid-template-columns: 100%;
  }
}

Как быстро перейти от макета шириной в 3 столбца к макету, сложенному в один столбец, с помощью CSS Grid?

Answer 1

Вы можете использовать repeat() для этого и просто установить столбцы в один кадр для медиа-запроса.

.page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

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

Answer 2

Вы можете добавить свойство grid-template-area следующим образом:

.page {
  display: grid;
  grid-template-area: "a b c";
  grid-template-columns: 33% 34% 33%
}

@media (max-width: 650px) {
  .page {
    grid-template-columns: 100%;
    grid-template-area: 
      "a"
      "b"
      "c";
  }
}

Где разделители строк обозначают новые строки.