CSS Сетка с одной колонкой для мобильных устройств без медиа-запросов

Question

У меня есть CSS Сетка для экранов рабочего стола, идущая по часовой стрелке следующим образом:

Code:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "one two" "four three";
}

.one { grid-area: one; }

.two { grid-area: two; }

.three { grid-area: three; }

.four { grid-area: four; }

<div class="grid-container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
</div>

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

This: 1 | Not this: 1
      2 |           2
      3 |           4
      4 |           3

Можно ли это сделать без использования медиа-запросов? Я чувствую, что мне не хватает чего-то простого.

Изменить: Судя по ответам, кажется, что мы должны использовать медиа-запросы для чего-то вроде этого. Принимаю первый ответ.

Answer 1

Ну, AFAIK, в любом случае, если вы хотите изменить макет для устройств с разным размером экрана, вы должны использовать медиа-запросы независимо от , чтобы указать, какой макет должен отображаться в каждом домене размера экрана .

Итак, исходя из этого предположения, ваш код должен быть примерно таким:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1px 1px;
  grid-template-areas: "one two" "four three";
}

@media (max-width: 767px) {
  .grid-container {
    grid-template-columns: 1fr;
    /* If you intend to use 1fr for each column indicating grid-template-columns is not required */
    grid-template-areas: "one" "two" "three" "four";
  }
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

.four {
  grid-area: four;
}

<div class="grid-container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

Answer 2

Нет, вы должны использовать медиа-запрос

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "one" "two" "three" "four";
}