How to make the amount of DIV to adapt

Question

Good afternoon, my doubt is the following, on my site there is a section where the highlights part is, and in this section there are 6 more Divs for the products display (image)

Well, so far so good, the problem is that when you zoom in, they start to group at the bottom and get messy with the bottom

What I imagined as a solution to this problem is that as it zooms in, instead of organizing down it just disappears, but I don’t know how to do that... And that’s the best way to fix it?

Answer 1

I believe that using the grid system Bootstrap would solve your problem.

<div class="row">
    <div class="col-md-2">
        <!-- Conteúdo-->
    </div>
    <div class="col-md-2">
        <!-- Conteúdo-->
    </div>
    <!-- ... -->
</div>

Adapt this code to your need and so should solve your problems.

Answer 2

See if that’s what you want...

#conteiner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
  height: 200px;
  width: 100%;
  overflow: hidden;
  resize: horizontal;
}
.item{
  flex-basis: auto;
  width: 198px;
  height: 198px;
  border: solid 1px black;
}

<div id="conteiner">
  <div class="item">Ítem 1</div>
  <div class="item">Ítem 2</div>
  <div class="item">Ítem 3</div>
  <div class="item">Ítem 4</div>
  <div class="item">Ítem 5</div>
  <div class="item">Ítem 6</div>
</div>