Grid адаптивная сетка, что не так?

Question

[igorc75]

Нужна шапка для сайта, чтобы при адаптивности,
сейчас расположены в десктопной версии так:
"line-1 line-2"
"line-3 line-4"

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

Ссылка CODEPEN

Answer 1

[Владимир]

флекс + медиа запрос покрывает твой случай на все 100
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Для десктопа flex: 1 1 50%
Для мобилки flex: 1 1 100%

Comments

[igorc75]

Владимир, мне не хочется на flex, хочу пробовать grid
вот такой код делает кашу:

.grid--1 {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
    		"line-1"
    		"line-2"
    		"line-3"
    		"line-4";
	}

[igorc75]

Владимир разобрался, нашел проблему