помогите разобраться с grid

[VGreen 10]

Всем привет. Решил я тут понять что такое grid. Полазил - погуглил, зверь интересный, кода меньше чем у флекса, но собака сложный в освоении))

Вообщем у меня тупик, не могу понять как сделать адаптивность без медиа - запросов, может кто сможет подсказать. Имеем следующее 

и собственно код

	<div class="parent">
		<div class="div1"> </div>
		<div class="div2"> </div>
		<div class="div3"> </div>
		<div class="div4"> </div>
		<div class="div5"> </div>
		<div class="div6"> </div>
	</div>

.parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	}
	
	.div1 { grid-area: 1 / 1 / 3 / 3; background-color: #f1951c; min-height: 400px;  }
	.div2 { grid-area: 1 / 3 / 3 / 5; background-color: #f1951c; min-height: 400px;  }
	.div3 { grid-area: 1 / 5 / 2 / 6; background-color: #f1951c; min-height: 400px;  }
	.div4 { grid-area: 1 / 6 / 2 / 7; background-color: #f1951c; min-height: 400px;  }
	.div5 { grid-area: 2 / 5 / 3 / 6; background-color: #f1951c; min-height: 400px;  }
	.div6 { grid-area: 2 / 6 / 3 / 7; background-color: #f1951c; min-height: 400px;  }

Однако при изменении размеров экрана, блоки не переносятся ниже, а просто пропадают

Можете подсказать в чем у меня ошибка, ведь по логике как только правая колонка блоков не влезает, она должна сместиться на третий ряд, затем следующая и т.д. 

И если не сложно набросать пример кода, чтобы на будущее я имел представление как правильно с этим работать, заранее спасибо))

Если кто знает хорошие статьи по grid-у буду рад ссылкам

[radrigo 170]

А почему собственно они должны переноситься? У вас чётко прописано при помощи grid-area, где каждый контейнер должен находиться. Какое бы разрешение экрана не было, они всегда будут на своём месте.

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

Не знаю, получится или нет, но вроде должно

Кстати, для изучения грид попробуйте поиграть в эту игру. Какой-то блогер написала. Мне очень помогло
https://cssgridgarden.com/#ru

[VGreen 10]

11 минут назад, radrigo сказал:

А почему собственно они должны переноситься? У вас чётко прописано при помощи grid-area, где каждый контейнер должен находиться. Какое бы разрешение экрана не было, они всегда будут на своём месте.

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

Не знаю, получится или нет, но вроде должно

Кстати, для изучения грид попробуйте поиграть в эту игру. Какой-то блогер написала. Мне очень помогло
https://cssgridgarden.com/#ru

Благодарю, испробуем

[igorek-art 28]

Я тоже пытаюсь грид этот освоить.. Вот смотрю, везде используются пиксели по высоте или подобное.. А как сделать например чтоб пропорциональнасть всегда сохранялась? Например я хочу в ряд 4 блока (с этим понял) но я не понимаю, как я понял по умолчанию это что-то типа соотношение ширину высоты 1к1, а как например прописывается если я не хочу квадрат, я хочу вертикальный прямоугольник с соотношением ширины к высоте 1 к 1.2 например? Пока приходится высоту ручками писать но это не то..