Как расположить блоки друг под другом?

Question

Нужно расположить блоки друг под другом при разрешении экрана меньше 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; работает, а с ним почему нет?

Answer 1

grid-template-columns: 1fr; тоже надо было добавить)

Answer 2

Вариант без медиа запросов:

.blocks,
.blocks_left {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

}

.block_1 {background: red;}
.block_2 {background: yellow;}
.block_3 {background: green;}

<div class="blocks">

  <div class="block_1"><p>block_1</p></div>

  <div class="blocks_left">
    <div class="block_2"><p>block_2</p></div>
    <div class="block_3"><p>block_3</p></div>
  </div>

</div>

БЛОГ НА HUSL

Как расположить блоки друг под другом?

Ответы (2 шт):