А почему собственно они должны переноситься? У вас чётко прописано при помощи grid-area, где каждый контейнер должен находиться. Какое бы разрешение экрана не было, они всегда будут на своём месте.
Попробуйте для начала убрать ограничение в количестве строк, указав в grid-template-rows тоже auto-fit. Также вообще уберите значение grid-area в блоках. А для первых двух блоков укажите следующие значения, чтобы они занимали по две строчки и по двое колонки.
grid-column-end: span 2;
grid-row-end: span 2;
Не знаю, получится или нет, но вроде должно
Кстати, для изучения грид попробу