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

Question

Как расположить блоки друг над другом при уменьшении размера экрана? codepen

Минимальная ширина блоков .top-item-1/2, .bottom-item-1/2 и .block_left - 320px

Должен быть такой порядок

.block_left
.block_right
.block_top-items
-- .top-item-1
-- .top-item-2
.block_middle-item
.block_bottom-items
-- .bottom-item-1
-- .bottom-item-2

.blocks
  .block_right
    p block_right
    .block_top-items
      .item-1
        p top-item-1
      .item-2
        p top-item-2
    .block_middle-item
      p block_middle-item
    .block_bottom-items
      .bottom-item-1
        p bottom-item-1
      .bottom-item-2
        p bottom-item-2
  .block_left
    p block_left

.blocks {
  display: grid;
  grid-template-columns: 70% 30%;
}
.block_right {
  background: red;
}
.block_left {
  background: green;
}
.block_top-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.item-1,
.item-2 {
  margin: 10px;
  background: orange;
}
.block_middle-item {
  margin: 10px;
  background: white;
}
.block_bottom-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bottom-item-1,
.bottom-item-2 {
  margin: 10px;
  background: orange;
}

Answer 1

grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); - где:

auto-fit - переносим на новую строку

minmax(340px... - 340px с учетом отступов margin

.blocks {
  display: grid;
  grid-template-columns: 70% 30%;
}

.block_right {
  background: red;
}

.block_left {
  background: green;
}

.block_top-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.item-1,
.item-2 {
  margin: 10px;
  background: orange;
}

.block_middle-item {
  margin: 10px;
  background: white;
}

.block_bottom-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.bottom-item-1,
.bottom-item-2 {
  margin: 10px;
  background: orange;
}

<div class="blocks">
  <div class="block_right">
    <p>block_right</p>
    <div class="block_top-items">
      <div class="item-1">
        <p>top-item-1</p>
      </div>
      <div class="item-2">
        <p>top-item-2</p>
      </div>
    </div>
    <div class="block_middle-item">
      <p>block_middle-item</p>
    </div>
    <div class="block_bottom-items">
      <div class="bottom-item-1">
        <p>bottom-item-1</p>
      </div>
      <div class="bottom-item-2">
        <p>bottom-item-2</p>
      </div>
    </div>
  </div>
  <div class="block_left">
    <p>block_left</p>
  </div>
</div>

Для реверса используем order: и media правила при необходимости

.blocks {
  display: grid;
  grid-template-columns: 70% 30%;
}

.block_right {
  padding: 10px;
  background: red;
}

.block_left {
  background: green;
}

@media only screen and (max-width: 800px) {
  .blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
  }
  .block_right {
    order: 1;
  }
  .block_left {
    order: -1;
  }
}

.block_top-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item-1,
.item-2 {
  background: orange;
}

.block_middle-item {
  background: white;
}

.block_bottom-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.bottom-item-1,
.bottom-item-2 {
  background: orange;
}

<div class="blocks">
  <div class="block_right">
    <p>block_right</p>
    <div class="block_top-items">
      <div class="item-1">
        <p>top-item-1</p>
      </div>
      <div class="item-2">
        <p>top-item-2</p>
      </div>
    </div>
    <div class="block_middle-item">
      <p>block_middle-item</p>
    </div>
    <div class="block_bottom-items">
      <div class="bottom-item-1">
        <p>bottom-item-1</p>
      </div>
      <div class="bottom-item-2">
        <p>bottom-item-2</p>
      </div>
    </div>
  </div>
  <div class="block_left">
    <p>block_left</p>
  </div>
</div>

БЛОГ НА HUSL

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

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