CSS | Grid Перенос блоков при переполнении

Question

Есть простенький макет, при увеличении страницы блоки уходят за края экрана и появляется скролл-бар, мне нужно что-бы они сдвигались в низ и были видны всегда без скролла. Как это сделать?

.full-main-block {
  display: flex;
  justify-self: center;
  margin-left: 100px;
}

.change-block {
  display: flex;
  flex-direction: column;
}

.balance-block {
  width: 300px;
  height: 200px;
  margin-left: 50px;
  background: blue;
}

.info-block {
  justify-self: end;
  width: 400px;
  height: 75%;
  background: lightblue;
}

.main-top-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.main-block {
  width: 200px;
  height: 300px;
  background: black;
  justify-self: center;
}

.change1 {
  width: 100px;
  height: 120px;
  background: darkgray;
}

.change {
  width: 100px;
  height: 120px;
  background: darkgray;
}

<div class="main-top-container">
  <div class="info-block"></div>
  <div class="full-main-block">
    <div class="main-block"></div>
    <div class="change-block">
      <div class="change"></div>
      <div class="change1"></div>
    </div>
  </div>
  <div class="balance-block"></div>
</div>

Answer 1

.main-top-container {
  display: flex;
  min-width: 320px;
  max-width:1000px;
  width:100%;
  flex-flow: row wrap;
}

.change {
  width: 200px;
  height: 120px;
  background: darkgray;
  margin:5px;
}

<div class="main-top-container">
      <div class="change"></div>
      <div class="change"></div>
      <div class="change"></div>
      <div class="change"></div>
      <div class="change"></div>     
      <div class="change"></div>     
      <div class="change"></div>
</div>

БЛОГ НА HUSL

CSS | Grid Перенос блоков при переполнении

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