Grid не работает как хочется (внезапно)

Общее
1

Сразу прошу прощения, что заголовок не отражает всей сути, но тут без поллитра не разобраться я не смог кратко сформулировать.
Итак. Вот такая незатейливая раскладка на гридах: https://jsfiddle.net/n3bhsa69/
По брейкпоинту правая колонка перемещается под левую, и все вроде бы ок. Но! Блок ‘left’ растягивается по высоте под размер блока ‘main’, соответственно при большом количестве контента в блоке ‘main’, правая колонка становится (по Y) после ‘main’.
Собственно, хотелось чтобы правая шла непосредственно после левой, а не подстраивалась под высоту ‘main’.
Надеюсь этот сумбур кто-нибудь поймет и поможет. Моего ума не хватает.
Заранее благодарю.

З.Ы.: Гуглить пытался (чесслово), но внятный запрос сформулировать не смог, поэтому не серчайте, если проблема элементарная, или не проблема вовсе :see_no_evil:

2

Совсем ни у кого нет идей?:pensive:

3

Ты хочешь, чтобы в итоге получилось, как на скриншоте?

grid1
grid1.PNG444×536 19.6 KB

4

Возможно, это тебе поможет:

    @media screen and (max-width:500px) {

      #wrapper {
        grid-template-columns:1fr;
        grid-template-rows:repeat(5, auto);
      }

      .header {
        grid-column:1/1;
      }
    
      .left {
        grid-column:1/1;
      }
      
      .main {
        grid-column:1/1;
      }
      
      .right {
        grid-column:1/1;
      }
      
      .footer {
      grid-column:1/1;
      }
      
    }
5

Не совсем так. Мне нужно чтобы правая колонка перемещалась под левую, и правая колонка начиналась непосредственно сразу после контента левой.
Т.е. колонок, по сути становится две (3 грид-лайна), а вот с кол-вом строк разобраться не могу.

6

Вот, вариант без media query, просто задача на размещение грид-элементов определенным образом:
https://jsfiddle.net/xwu2gqLj/13/

7

Попробуй сделать с помощью grid-template-areas.

8

С grid-areas, в общем-то, тот же цирк :disappointed: