Как изменить порядок блоков в grid сетке?

Question

[Nwton]

Сделал 2 колонки из блоков: https://jsfiddle.net/qpvgfdst/2
Но необходимо, чтобы порядок блоков был не такой, как в примере, а как на рисунке ниже. Что можно сделать?

Answer 1

[Татьяна С]

Можно добавить

grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);

https://jsfiddle.net/qpvgfdst/11/

Answer 2

[Матвей Феникс]

Используй вот это свойство, раскидай по шаблону блоки как тебе нужно https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Comments

[Froggyweb]

по-моему

grid-template-areas:
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
"ft ft ft ft ft ft ft ft ft";

'это ад

[Матвей Феникс]

Froggyweb,