css resizeable div position different sizes

Question

Hi I'm trying to make a page in which I have a number x of divs and they can be resize, horizontally using bootstrap col (col-2..-12), vertically without limit. I can add more divs in any moment

I want to put the div after the previous one if enter, if not pass to the next row. You can see below the sample, but can be any size, here the div 2 is resize so the div 6 have to move to the right.

There is any way to do this in css? Thank you.

Answer 1

You may use grid layout to achieve this kind of layout:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div class="row-span">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>