Нужно расположить блоки друг под другом при разрешении экрана меньше 800px. Размер у всех трех блоков должен быть одинаковый. codepen
В порядке
.block_1
.block_2
.block_3
код
.blocks
.block_1
p block_1
.blocks_left
.block_2
p block_2
.block_3
p block_3
.blocks,
.blocks_left {
display: grid;
}
.blocks {
grid-template-columns: 2fr 1fr;
@media screen and (max-width: 800px) {
grid-template-rows: 1fr 2fr;
}
}
.block_1 {
background: red;
}
.block_2 {
background: yellow;
}
.block_3 {
background: green;
}
Если без медиа запроса, то grid-template-rows: 1fr 2fr; работает, а с ним почему нет?