1

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

1
  • @Pavel Grishaev, там же scss. С вынесенным блоком тоже не работает
    – SOLID
    22 апр 2021 в 13:06

2 ответа 2

1

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

.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>

0

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.